Auto Kopfhöhe mit einem Bild anpassen

Question

Ich habe ein Bild, das ist 1903 x 475 Pixel und ich habe ein Set in meiner Kopfzeile. Ich musste die Header-Höhe auf 475px nur das Bild sehen. Alles sieht gut aus, bis ich für kleinere Bildschirme teste. Ich füge eine Hintergrundgröße von 100% hinzu, wodurch das Bild automatisch angepasst werden kann, aber die Höhe der Kopfzeile bleibt bei 475 Pixel. Ich fühle mich über eine einfache Technik, aber ich brauche die Kopfzeile, um die Höhe des Bildes anzupassen, wenn die Bildschirmgröße kleiner wird. Hier

ist das, was ich habe für den Header und dem Bild:

*.navbar.navbar-default.navbar-static-top { 
    margin-bottom: 25px; 
    background: url(../images/flavor-westbg.jpg)top center no-repeat; 
    background-size: 100%; 
    min-height: 475px; 
    width: auto; 
}* 

Oh eine letzte Sache. Ich kann das CSS nur für dieses Projekt optimieren.

Answer 1

Was ist mit css Medienabfragen?

Media Queries: How to target desktop, tablet and mobile?

@media queries and image swapping

Answer 2

Ich nehme an, Sie Bootstrap verwenden. Eine Sache, die Sie versuchen könnten, ist "padding-top: px;" für das Foto oder Sie legen den Ordner unter. Ich musste Padding verwenden, um ein ähnliches Problem mit einem Jumbotron zu beheben.