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

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

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

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