ansprechende Bilder ohne skaliert bekommen

Question

Ich habe ein Bild auf volle Browser-Bildschirm zentriert, wie unten

Ich versuche Bild zu erhalten als Reaktion ohne skaliert zu werden. Mittel, die ich nicht auf reagieren möchte, sollte Bild klein sein. Ich möchte nur auf die kleinste Größe des Browsers Bildschirm Mitte des Bildes sollte immer gesehen werden. So sollte bei zunehmender Browser-Bildschirmgröße von kleiner zu großer, linker und rechter Bildteil gesehen werden.

Auf kleineren Bildschirm Bild sollte wie folgt sein, Breite des Bildes sollte nicht ändern. Auch sollte es nicht horizontale Scroll sein.

HTML-Code

<section id="main"> 
    <header> 
     <span class="avatar"><img src="images/test.jpg" alt="" /></span> 
    </header> 
</section> 

Css Code

#main { 
    position: relative; 
    max-width: 100%; 
    min-width: 27em; 
    padding: 4.5em 3em 3em 3em ; 
    border-radius: 4px; 
    cursor: default; 
    opacity: 0.95; 
    text-align: center; 
    -moz-transform-origin: 50% 50%; 
    -webkit-transform-origin: 50% 50%; 
    -ms-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
    -moz-transform: rotateX(0deg); 
    -webkit-transform: rotateX(0deg); 
    -ms-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
    -moz-transition: opacity 1s ease, -moz-transform 1s ease; 
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; 
    -ms-transition: opacity 1s ease, -ms-transform 1s ease; 
    transition: opacity 1s ease, transform 1s ease; 
} 

#main .avatar { 
    width: 90%; 
    text-align: center; 
    overflow: hidden; 
} 

#main .avatar img { 
    position: relative; 
    left: 100%; 
    margin-left: -200%; 
} 

Mit über css I mittleren Teil des Bildes sehe aber ich horizontale Scroll bin immer.

Jeder bitte sagen Sie mir, wie ich reaktionsfähiges Bild (ohne horizontales Scroll) bekommen sollte, ohne die Bildgröße auf reaktionsfähig zu ändern?

EDIT

'test.jpg' ist Person Bild, nicht das Hintergrundbild. Hintergrundbild ist anders. Person Bild sollte wie Hintergrundbild verhalten sich wie in diesem Fall

http://cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html

Bitte empfehlen Sie mir, wie mein css für ‚test.jpg‘ sein sollte?

Answer 1

verwendet CSS für Ihren Hintergrund

#main{ 
    background-position: center center; 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

Dies wird nicht die Größe des Bildes ändern und nur den möglichen Mittelteil sichtbar.

Answer 2

overflow: hidden-#main hinzufügen, dann die horizontale Scroll nicht erscheinen wird, wird das Bild nicht auf kleinen Bildschirmen skaliert werden und da Sie bereits text-align: center gesetzt haben, nur den mittleren Teil des Bildes sichtbar.