Maison >interface Web >tutoriel CSS >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 :
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!