Verhindern, dass ein Bild das Seitenverhältnis ändert, wenn eine bestimmte Breite der Seite

Question

Ich bin immer noch ein bisschen wie ein Noob an dieser so leid, wenn dies offensichtlich ist. Ich versuche, einen unscharfen Hintergrundbild-Header zu erstellen, und ich habe Probleme, wenn ich die Breite meines Browsers reduziere. Wie Sie von this code pen sehen können, wenn die Breite des Bildschirms zu klein wird, beginnt das Bild zu verzerren. Wenn Sie die Mindesthöhe entfernen, bleibt das Seitenverhältnis korrekt, aber das Bild wird in der Größe angepasst und für den Header-Container zu klein.

Hier ist mein Code:

<div class="image-header"> 
     <img id="blurred-header-bg" src="http://image.tmdb.org/t/p/w500/eIOTsGg9FCVrBc4r2nXaV61JF4F.jpg"/> 
</div> 

und Stil

.image-header { 
    position: relative; 
    width: 100%; 
    height: 400px; 
    margin-top: -20px; 
    overflow: hidden; 
} 
    #blurred-header-bg { 
    width: 100%; 
    min-height: 800px; 
    margin-top: -25%; 
    -webkit-filter: blur(15px); 
    -webkit-transform: translate3d(0, 0, 0); 
    } 

Vielen Dank

bearbeiten - ich den min-width wie vorgeschlagen geändert habe, aber bin jetzt Probleme, die Bildzentrierung . Jede Hilfe mit diesem würde vorgeschlagen werden. (Haben Sie versucht so dass es angezeigt werden als Block und Eltern text-align ohne Erfolg zum Zentrum)

edit2 - gelöst, die die Zentrierung Ausgabe dank this answer

Answer 1

Nur width: 100%;-min-width: 100%; ändern und das Bild nicht verzerrt wird, aber immer noch Fülle den Bereich.