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

Automation de la hauteur d'un div basée sur la taille de l'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 d'arrière-plan. Cependant, définir une hauteur spécifique pour le div peut entraver cette fonctionnalité.

Solution :

Une technique astucieuse consiste à exploiter la propriété padding-top. En définissant la hauteur du div sur 0 et en calculant le remplissage supérieur en fonction du rapport entre la largeur et la hauteur de l'image d'arrière-plan, le div peut imiter le comportement d'un élément img, en le redimensionnant automatiquement pour l'adapter à l'image d'arrière-plan.

Exemple de code :

Considérez le code CSS suivant :

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

Dans ce Par exemple, le div sera automatiquement redimensionné en fonction des proportions de l'image d'arrière-plan (1280 px de large x 853 px de haut), dans ce cas, un ratio de 66,64 %. En définissant la hauteur sur 0 et en utilisant padding-top en pourcentage, le div apparaîtra comme si sa hauteur était ajustée automatiquement.

Cette technique élimine le besoin de régler manuellement la hauteur ou la hauteur minimale du div et fournit une solution dynamique pour les images de différentes tailles.

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!