Wie kann ich die Höhe eines Divs an sein Hintergrundbild anpassen?

Responsive Div-Höhe mit Hintergrundbild

In Erweiterung des Konzepts responsiver Bilder kann eine ähnliche Technik auf Divs angewendet werden, um deren Höhe automatisch anzupassen Höhe basierend auf der Größe ihres Hintergrundbilds. Ohne explizit eine Höhe oder Mindesthöhe festzulegen, kann dadurch ein flüssiges und dynamisches Layout erstellt werden.

Lösung

Um dies zu erreichen, können wir die Leistungsfähigkeit von padding-top nutzen . Indem wir die Höhe des Div auf 0 setzen und den Padding-Top-Wert als Prozentsatz manipulieren, können wir das Verhalten eines Bildelements nachahmen.

Hier ist eine Aufschlüsselung des Codes:

div {
    background-image: url('...');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: (image-height / image-width) * container-width;
}

• Legen Sie die Eigenschaft „Hintergrundbild“ mit der gewünschten Bild-URL fest.
• Verwenden Sie „Hintergrundgröße: enthalten“, um sicherzustellen, dass das Bild in die URL passt div, ohne das Seitenverhältnis zu verzerren.
• Setzen Sie „background-repeat“ auf „no-repeat“, um zu verhindern, dass das Bild gekachelt wird.
• Stellen Sie die Breite auf 100 % ein, um das Verhalten in voller Breite zu erreichen.
• Behalten Sie die Höhe bei 0, um alle erzwungenen Höhenbeschränkungen zu entfernen.
• Berechnen Sie den Wert für die obere Polsterung als Verhältnis von die Bildhöhe zur Bildbreite multipliziert mit der Breite des Containers. Dadurch wird sichergestellt, dass die Div-Höhe entsprechend angepasst wird.

Beispiel

Betrachten Sie das folgende Div mit dieser Technik, wobei das Bild 853 Pixel hoch und 1280 Pixel breit ist:

<div><p>Dieses Div passt seine Höhe automatisch an die Größe des darin enthaltenen Bildes an und erstellt es ein reaktionsfähiges und dynamisches Layoutelement.</p></div>

Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe eines Divs an sein Hintergrundbild anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!