Держите изображение всегда в центре независимо от размера браузера
Мне интересно, возможно ли сохранитьimg
внутриdiv
всегда в центре независимо от размера браузера? Под центрированием я подразумеваю, что левая / правая стороны изображения обрезаются, чтобы гарантировать, что изображение остается в центре без изменения высоты. Кроме того, возможно ли предотвратить появление горизонтальной полосы прокрутки, когда ширина браузера меньше ширины изображения? I '
Я уверен, что это действительно легко сделать, если мое изображение находится вbackground-url
тег в CSS, но поскольку это изображение находится внутри карусели SlidesJS, изображение должно быть изimg
тег.
На данный момент я использовалmargin:0 auto;
держать изображение по центру, пока ширина браузера больше, чем изображение. Как только ширина браузера уменьшается, изображение не изменяется с уменьшающимся размером браузера. Мне также еще предстоит выяснить, как убрать горизонтальную полосу прокрутки, когда ширина браузера слишком мала.
Это то, что яЯ пытаюсь достичь:http://imgur.com/Nxh5n
Это пример того, как должен выглядеть макет страницы:http://imgur.com/r9tYx
Пример моего кода:http://jsfiddle.net/9tRZG/
HTML:
<img src="http://www.placehold.it/200x50/">
<img src="http://www.placehold.it/200x50/">
<img src="http://www.placehold.it/200x50/">
CSS:
#wrapper {
width: 200px;
margin: 0 auto;
}