Comment puis-je remplir un Div avec une image tout en préservant son rapport hauteur/largeur ?

Remplir un Div avec une image tout en conservant les proportions

Dans le développement Web, vous pouvez rencontrer le besoin d'afficher une image dans un élément div tout en garantissant que le rapport hauteur/largeur de l'image reste intact. Cela peut être un problème délicat, mais une solution réside dans la combinaison d'une flexbox CSS et d'un dimensionnement soigné de l'image.

Considérez ce scénario : vous avez un élément div avec une taille fixe et une image à l'intérieur. Vous voulez que l'image remplisse toujours le div, qu'il s'agisse d'une orientation paysage ou portrait. Cette exigence peut être remplie même si l'image est coupée car le div a un débordement : ensemble caché.

Pour obtenir cet effet, suivez ces étapes :

• Supprimez la largeur et la hauteur attributs de la balise d'image pour conserver ses proportions.
• Définissez l'élément div pour utiliser flexbox avec display: flex.
• Utilisez justifier-content : centrer et aligner-éléments : centrer sur le div pour centrer l'image à l'intérieur.
• Ajouter un débordement : caché au div pour recadrer toute image en excès qui dépasse sa taille.
• Stylisez l'image dans le div comme suit :

.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

• Le flex-shrink : 0 garantit que l'image ne rétrécit pas si le div devient plus petit.
• La largeur minimale : 100 % et la hauteur minimale : 100 % garantissent que l'image est toujours au moins aussi grande que le div.

Grâce à cette technique, vous pouvez remplir un div avec une image tout en conservant ses proportions, quelle que soit son orientation.

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!