Comment puis-je conserver les proportions de l'image dans CSS Flexbox tout en autorisant une hauteur flexible ?

Préserver les proportions de l'image avec une hauteur flexible

Dans le modèle de boîte flexible CSS, les images s'étirent ou se rétrécissent souvent pour remplir la largeur de leur conteneur . Maintenir le rapport hauteur/largeur lors du réglage de la hauteur peut être un défi. Pour résoudre ce problème, explorons des solutions efficaces.

Une solution consiste à utiliser l'ajustement d'objet sur l'élément image :

object-fit: contain;

Cette propriété demande au navigateur de contenir l'image dans l'espace désigné. tout en préservant ses proportions. Vous pouvez voir un exemple en direct sur http://jsfiddle.net/ykw3sfjd/.

Alternativement, des propriétés de flexion spécifiques peuvent être utilisées :

align-self: center;
flex: 0 0 auto;

align-self garantit que l'image est verticale. centré dans l'élément parent, tandis que flex: 0 0 auto contrôle le comportement de croissance de l'image. Il empêche l'image de s'étirer pour remplir la hauteur disponible, lui permettant ainsi de conserver son rapport hauteur/largeur.

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!