Comment puis-je ajuster automatiquement la hauteur d'un div à la taille de son image d'arrière-plan ?

Réalisation d'un réglage automatique de la hauteur d'un div en fonction de la taille de l'image d'arrière-plan

Dans le développement Web, il est souvent souhaitable que la hauteur d'un div s'ajuste automatiquement à la taille de son image de fond. Cependant, définir une hauteur spécifique ou une hauteur minimale pour le div peut limiter sa flexibilité.

Il existe une solution innovante qui vous permet de faire en sorte qu'une image d'arrière-plan se comporte comme un élément img, où sa hauteur s'ajuste automatiquement. Pour y parvenir, vous aurez besoin du rapport largeur et hauteur de l'image.

Réglez la hauteur du div sur 0 et définissez sa propriété padding-top sous forme de pourcentage basé sur le rapport de l'image. Le code suivant illustre cela :

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) */
}

Cette approche vous donne essentiellement une image d'arrière-plan avec une hauteur automatique, similaire à un élément img. Vous pouvez trouver un prototype fonctionnel sur http://jsfiddle.net/8m9ur5qj. Redimensionnez le div pour observer comment la hauteur s'ajuste automatiquement en fonction de la taille de l'image d'arrière-plan.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!