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

Lösen des dynamischen Höhenrätsels für Div-Elemente mit Hintergrundbildern

Wie können Sie sicherstellen, dass ein Div-Element seine Höhe elegant anpasst, um mit dem übereinzustimmen? Größe des Hintergrundbilds, das Sie ihm zuweisen, ohne manuell eine feste Höhe oder Mindesthöhe anzugeben?

Enthüllung die Technik der automatischen Anpassung von Hintergrundbildern

Webentwickler haben eine geniale Lösung entwickelt, die das Verhalten von Bildelementen für div-Elemente mit Hintergrundbildern nachahmt. Indem Sie das Seitenverhältnis des Bildes nutzen, können Sie die Höhe des Container-Div dynamisch bestimmen.

Schritt-für-Schritt-Implementierung:

1. Legen Sie die Höhe von fest das div-Element auf 0.
2. Berechnen Sie den Prozentsatz des oberen Randes, indem Sie das Verhältnis von Bildhöhe zu Breite multipliziert mit dem des Containers verwenden Breite.

Zum Beispiel ein Bild mit einer Höhe von 853 Pixeln und einer Breite von 1280 Pixeln und einer Div-Breite von 100 %:

padding-top: 66.64% /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */

CSS-Beispiel:

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

Praktisch Anwendung:

Diese Technik verleiht einem div-Element die Möglichkeit, seine Höhe automatisch an das Hintergrundbild anzupassen. Es ähnelt der Verwendung eines img-Elements, erfordert jedoch keine expliziten Höhen- oder Mindesthöhendeklarationen.

Sehen Sie sich dieses Arbeitsbeispiel an: http://jsfiddle.net/8m9ur5qj/

Von Wenn Sie die Größe des Containers ändern, können Sie beobachten, wie sich die Höhe des Div dynamisch ändert und dabei das Seitenverhältnis des Hintergrundbilds beibehalten wird.

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