Wie kann ich die Höhe eines Divs automatisch an die Größe seines Hintergrundbilds anpassen?

Erzielen einer automatischen Anpassung der Div-Höhe basierend auf der Größe des Hintergrundbilds

In der Webentwicklung ist es oft wünschenswert, dass sich die Höhe eines Div automatisch anpasst die Größe des Hintergrundbilds. Das Festlegen einer bestimmten Höhe oder Mindesthöhe für das Div kann jedoch seine Flexibilität einschränken.

Es gibt eine innovative Lösung, mit der Sie dafür sorgen können, dass sich ein Hintergrundbild wie ein IMG-Element verhält, bei dem sich seine Höhe automatisch anpasst. Um dies zu erreichen, benötigen Sie das Breiten- und Höhenverhältnis des Bildes.

Setzen Sie die Höhe des Div auf 0 und definieren Sie seine Eigenschaft „padding-top“ als Prozentsatz basierend auf dem Bildverhältnis. Der folgende Code veranschaulicht dies:

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

Mit diesem Ansatz erhalten Sie im Wesentlichen ein Hintergrundbild mit automatischer Höhe, ähnlich einem img-Element. Einen funktionierenden Prototyp finden Sie unter http://jsfiddle.net/8m9ur5qj. Ändern Sie die Größe des Div, um zu beobachten, wie sich die Höhe automatisch an die Größe des Hintergrundbilds anpasst.

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