Me pregunto si es posible mantener unaimg dentro de unadiv ¿Siempre centrado sin importar el tamaño del navegador? Al estar centrado, quiero decir que los lados izquierdo / derecho de la imagen se recortan para garantizar que la imagen permanezca centrada sin modificar la altura. Además, ¿es posible evitar que la barra de desplazamiento horizontal aparezca cuando el ancho del navegador es menor que el ancho de la imagen?

Estoy seguro de que esto es realmente fácil de hacer si mi imagen se encuentra en unbackground-url en CSS, pero debido a que esta imagen se encuentra dentro del carrusel SlidesJS, la imagen debe ser de unimg etiqueta.

Por el momento, he utilizadomargin:0 auto; para mantener la imagen centrada siempre que el ancho del navegador sea mayor que la imagen. Una vez que el ancho del navegador se reduce, la imagen no cambia de tamaño con el tamaño del navegador. También tengo que averiguar cómo quitar la barra de desplazamiento horizontal cuando el ancho del navegador es demasiado pequeño.

Esto es lo que estoy tratando de lograr:http://imgur.com/Nxh5n

Este es un ejemplo de cómo se supone que debe verse el diseño de la página:http://imgur.com/r9tYx

Ejemplo de mi código: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;
}​