Zastanawiam się, czy możliwe jest zachowanieimg wewnątrz adiv zawsze wyśrodkowany niezależnie od rozmiaru przeglądarki? Przez wyśrodkowanie mam na myśli to, że lewa / prawa strona obrazu zostanie przycięta, aby zapewnić, że obraz pozostanie wyśrodkowany bez zmiany wysokości. Czy możliwe jest również zapobieganie pojawianiu się poziomego paska przewijania, gdy szerokość przeglądarki jest mniejsza niż szerokość obrazu?

Jestem pewien, że jest to naprawdę łatwe do zrobienia, jeśli moje zdjęcie znajduje się w abackground-url tag w CSS, ale ponieważ ten obraz jest umieszczony wewnątrz karuzeli SlidesJS, obraz musi być zimg etykietka.

W tej chwili użyłemmargin:0 auto; aby obraz był wyśrodkowany tak długo, jak szerokość przeglądarki jest większa niż obraz. Po zmniejszeniu szerokości przeglądarki obraz nie zmienia rozmiaru przy zmniejszającym się rozmiarze przeglądarki. Muszę też dowiedzieć się, jak usunąć poziomy pasek przewijania, gdy szerokość przeglądarki jest zbyt mała.

To właśnie staram się osiągnąć:http://imgur.com/Nxh5n

Oto przykład tego, jak powinien wyglądać układ strony:http://imgur.com/r9tYx

Przykład mojego kodu: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;
}​