Comment puis-je ajuster dynamiquement la hauteur d'une division à son image d'arrière-plan ?

Résoudre l'énigme de la hauteur dynamique des éléments Div avec des images d'arrière-plan

Comment pouvez-vous vous assurer qu'un élément div ajuste gracieusement sa hauteur pour correspondre à la taille de l'image de fond que vous lui attribuez, sans spécifier manuellement une hauteur fixe ou une hauteur minimale ?

Dévoilement la technique d'ajustement automatique de l'image d'arrière-plan

Les développeurs Web ont conçu une solution ingénieuse qui imite le comportement des éléments d'image pour les éléments div avec des images d'arrière-plan. En exploitant le rapport hauteur/largeur de l'image, vous pouvez déterminer dynamiquement la hauteur du div du conteneur.

Mise en œuvre étape par étape :

1. Définir la hauteur de l'élément div à 0.
2. Calculez le pourcentage de remplissage supérieur en utilisant le rapport hauteur/largeur de l'image multiplié par celui du conteneur. width.

Par exemple, étant donné une image d'une hauteur de 853 pixels et d'une largeur de 1280 pixels, et d'une largeur div de 100 % :

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

Exemple CSS :

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

Pratique Application :

Cette technique accorde à un élément div la possibilité d'ajuster automatiquement sa hauteur pour s'adapter à l'image d'arrière-plan. Cela revient à utiliser un élément img, mais sans avoir besoin de déclarations explicites de hauteur ou de hauteur min.

Découvrez cet exemple fonctionnel : http://jsfiddle.net/8m9ur5qj/

By En redimensionnant le conteneur, vous pouvez voir comment la hauteur du div change dynamiquement, en préservant les proportions 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!