Eu estou querendo saber se é possível manter umimg dentro de umdiv sempre centralizado, independentemente do tamanho do navegador? Ao ser centralizado, quero dizer que os lados esquerdo / direito da imagem são cortados para garantir que a imagem permaneça centralizada sem modificar a altura. Além disso, é possível evitar que a barra de rolagem horizontal apareça quando a largura do navegador é menor que a largura da imagem?

Tenho certeza que isso é realmente fácil de fazer se a minha imagem está localizada em umbackground-url em CSS, mas como esta imagem está sendo armazenada dentro do carrossel do SlidesJS, a imagem deve ser de umimg tag.

No momento, eu useimargin:0 auto; para manter a imagem centralizada, desde que a largura do navegador seja maior que a imagem. Quando a largura do navegador diminui, a imagem não é redimensionada com o tamanho do navegador reduzido. Eu também ainda tenho que descobrir como remover a barra de rolagem horizontal quando a largura do navegador é muito pequena.

É isso que estou tentando alcançar:http://imgur.com/Nxh5n

Este é um exemplo de como o layout da página deve ser:http://imgur.com/r9tYx

Exemplo do meu 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;
}​