Halten Sie ein Bild unabhängig von der Browsergröße immer zentriert

Ich frage mich, ob es möglich ist, eine zu behaltenimg in einemdiv unabhängig von der Browsergröße immer zentriert? Mit zentriert meine ich, dass die linke / rechte Seite des Bildes beschnitten wird, um sicherzustellen, dass das Bild zentriert bleibt, ohne die Höhe zu verändern. Kann auch verhindert werden, dass die horizontale Bildlaufleiste angezeigt wird, wenn die Browserbreite geringer ist als die Bildbreite?

Ich bin mir sicher, dass dies sehr einfach ist, wenn sich mein Bild in einer befindetbackground-url Tag in CSS, aber da dieses Bild im SlidesJS-Karussell untergebracht ist, muss das Bild von einemimg Etikett.

Im Moment habe ich benutztmargin:0 auto; um das Bild in der Mitte zu halten, solange der Browser breiter ist als das Bild. Sobald die Browser-Breite verkleinert ist, ändert sich die Bildgröße nicht mehr mit der verkleinerten Browser-Größe. Ich habe auch noch nicht herausgefunden, wie ich die horizontale Bildlaufleiste entfernen kann, wenn die Browserbreite zu klein ist.

Das versuche ich zu erreichen:http://imgur.com/Nxh5n

Dies ist ein Beispiel dafür, wie das Seitenlayout aussehen soll:http://imgur.com/r9tYx

Beispiel meines Codes: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;
}​

Antworten auf die Frage(3)

Ihre Antwort auf die Frage