Problem mit Reaktionsfähigkeit des Hintergrundbildes und passen

Question

Ich habe ein Problem, mein Hintergrundbild in meiner Kopfzeile zu bekommen, um richtig zu sehen.

Gerade jetzt, wird es auf:

.hero { 
    background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center; 
    background-size: cover; 
    background-position: center; 
} 

Ive versuchte es viele Variationen von CSS zu arbeiten, aber kann es nicht herausfinden. Ich möchte, dass die Sektion das gesamte Bild zeigt und es weiterhin anzeigt (nicht abgeschnitten), wenn der Browser schrumpft. Ab jetzt schneidet es oben und unten im Bild, bis ich schrumpft und dann zeigt es die ganze Sache. Wenn ich weiter schrumpfe, schneidet es die Seiten ab.

Als ich die BG-Größe umschlossen habe, war ich mit einer Menge Platz um das Bild auf kleinen Geräten. Jede Hilfe wird geschätzt.

-Link: http://solatube.solabrite.com/premier-dealer

Answer 1

, das zu tun, muss das Seitenverhältnis von .hero die des Bildes anzupassen. Sie können dies tun, indem Sie dem Element eine Auffüllung mit dem Prozentanteil zuweisen, der das Bildseitenverhältnis darstellt. Sie können diesen Prozentsatz erhalten, indem Sie die Bildhöhe durch ihre Breite dividieren (500/1280 = 39,0625%).

diesem CSS

.hero { 
    height: 0; 
    padding-top: 39.0625%; 
} 

Answer 2

hinzufügen Wenn Sie background-size: cover verwenden, dann wird das Bild skaliert werden, bis sie den gesamten zur Verfügung stehenden Raum abdeckt.

Vielleicht versuchen Sie es mit background-size: contain, dann wird das Bild skaliert werden, bis sie bedeckt entweder die x oder y Dimension des verfügbaren Platzes.

ABER: Wenn Ihr Bild das gleiche Seitenverhältnis hat wie der Bereich, den es zu verdecken versucht, sollte dies jedoch kein Problem darstellen.