+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: srodkowanie elementu img (/thread-srodkowanie-elementu-img)
srodkowanie elementu img - kowal88 - 25-09-2012
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
RE: srodkowanie elementu img - Radian - 25-09-2012
nie wystarczy dać mu margin:auto ? i text-align:center ?
RE: srodkowanie elementu img - kowal88 - 25-09-2012
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
RE: srodkowanie elementu img - Adi80 - 25-09-2012
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
RE: srodkowanie elementu img - Radian - 25-09-2012
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...
RE: srodkowanie elementu img - Kartofelek - 25-09-2012
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.