Держите изображение всегда в центре независимо от размера браузера

Мне интересно, возможно ли сохранить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;
}​

Ответы на вопрос(3)

Ваш ответ на вопрос