srodkowanie elementu img

[kowal88]

Witam,
To mój pierwszy post na tym forum, a więc od razu witam was wszystkich serdecznie.
Piszę tu z konkretnym problemem który mnie dręczy. Mam stronę o szerokości 1000px szerokość stała w headerze mam slider zdjęć który ma szerokość 1600px. Pytanie moje brzmi jak zrobić, aby obrazek przy rozszerzaniu strony centrował za każdym razem ten obrazek w sliderze tak, żeby zawsze był wyśrodkowany, a odcięta część była zawsze taka sama z lewej i z prawej, aż do tej szerokości 1600px. Dzięki za jakąkolwiek pomoc

[Radian]

nie wystarczy dać mu margin:auto ? i text-align:center ?

[kowal88]

nie, bo jak zmniejszam okno przeglądarki to zdjęcie chowa się tylko z prawej strony, a chciałbym zeby chowało się z obu przez to zawsze byłoby wyśrodkowane

np. na tej stronie header

http://unstoppablerobotninja.com/entry/fluid-images

zmniejsza sie z prawej i z lewej, ale to jest background, a ja takie cos potrzebuje dla img

[Adi80]

Hey

Wydaje mi się że musi być jeszcze wartość width: 100% . Jeśli chcesz ograniczyć obrazek skalowania do max 1600px to trzeba dodać jeszcze max-width: 1600px, no i margin: auto. Wydaje mi się że wtedy obrazek będzie się pojawiał maxymalnie w rozmiarze 1600px (powyżej tego rozmiaru będą się tylko marginy powiększać, a jak będziesz zmniejszał przeglądarkę to wtedy powinien się skalować z racji iż wartość 100% odnosi się do rozmiaru elementu w którym jest więc przy zmniejszaniu będzie dynamiczna. Miałem kiedyś podobny problem i wydaje mi się że takie znalazłem rozwiązanie tego

[Radian]

to musiał byś chyba za pomocą js pobrać aktualne wymiary okna ale nie chce głupot w tym wypadku strzelać bo może jest prostsza metoda...

[Kartofelek]

Skoro masz stronę 1000px a w niej slider 1600 to:
(1600 - 1000)/2 = 300

czyli slider wrzucasz w div który ma margin-left:-300px; width:1600px; text-align:center;
pewnie sam slider musi mieć margin:0 auto

Kod:

<div style="margin-left:-300px; width:1600px;">
   <div id="slider" style="margin:0 auto; width:.....">
   </div>
</div>

i tyle.