Держите изображение всегда в центре независимо от размера браузера
Мне интересно, возможно ли сохранитьimg
внутриdiv
всегда в центре независимо от размера браузера? Под центрированием я подразумеваю, что левая / правая стороны изображения обрезаются, чтобы гарантировать, что изображение остается в центре без изменения высоты. Кроме того, возможно ли предотвратить появление горизонтальной полосы прокрутки, когда ширина браузера меньше ширины изображения?
Я уверен, что это действительно легко сделать, если мое изображение находится вbackground-url
тег в CSS, но поскольку это изображение находится внутри карусели SlidesJS, изображение должно быть изimg
тег.
На данный момент я использовалmargin:0 auto;
держать изображение по центру, пока ширина браузера больше, чем изображение. Как только ширина браузера уменьшается, изображение не изменяется с уменьшающимся размером браузера. Мне также еще предстоит выяснить, как убрать горизонтальную полосу прокрутки, когда ширина браузера слишком мала.
Вот чего я пытаюсь достичь:http://imgur.com/Nxh5n
Это пример того, как должен выглядеть макет страницы:http://imgur.com/r9tYx
Пример моего кода: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;
}