Utrzymuj obraz zawsze skoncentrowany niezależnie od rozmiaru przeglądarki
Zastanawiam się, czy możliwe jest zachowanieimg
wewnątrz adiv
zawsze wyśrodkowany niezależnie od rozmiaru przeglądarki? Przez wyśrodkowanie mam na myśli to, że lewa / prawa strona obrazu zostanie przycięta, aby zapewnić, że obraz pozostanie wyśrodkowany bez zmiany wysokości. Czy możliwe jest również zapobieganie pojawianiu się poziomego paska przewijania, gdy szerokość przeglądarki jest mniejsza niż szerokość obrazu?
Jestem pewien, że jest to naprawdę łatwe do zrobienia, jeśli moje zdjęcie znajduje się w abackground-url
tag w CSS, ale ponieważ ten obraz jest umieszczony wewnątrz karuzeli SlidesJS, obraz musi być zimg
etykietka.
W tej chwili użyłemmargin:0 auto;
aby obraz był wyśrodkowany tak długo, jak szerokość przeglądarki jest większa niż obraz. Po zmniejszeniu szerokości przeglądarki obraz nie zmienia rozmiaru przy zmniejszającym się rozmiarze przeglądarki. Muszę też dowiedzieć się, jak usunąć poziomy pasek przewijania, gdy szerokość przeglądarki jest zbyt mała.
To właśnie staram się osiągnąć:http://imgur.com/Nxh5n
Oto przykład tego, jak powinien wyglądać układ strony:http://imgur.com/r9tYx
Przykład mojego kodu:http://jsfiddle.net/9tRZG/
HTML:
<div id="wrapper">
<div id="slides">
<div class="slides_container">
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 200px;
margin: 0 auto;
}