Maison >interface Web >tutoriel CSS >Comment conserver le rapport hauteur/largeur de l'image dans Flexbox ?
Maintenir les proportions de l'image dans Flexbox
Dans une disposition flexbox, les images ont tendance à s'étirer ou à rétrécir de manière disproportionnée pour remplir la largeur du conteneur. Pour conserver les proportions tout en ajustant la hauteur de l'image, envisagez les solutions suivantes :
Option 1 : ajustement d'objet
Ajoutez la propriété d'ajustement d'objet à l'image :
img { object-fit: contain; }
Cela garantit que l'image conserve ses dimensions tout en s'insérant dans le conteneur.
Option 2 : Règles Flexbox
Utilisez les propriétés flexbox suivantes sur l'image :
img { align-self: center; flex: 0 0 auto; }
Exemple en direct :
<div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> </div>
.slider { display: flex; } .slider img { margin: 0 5px; } /* Option 1: object-fit */ .img-contain { object-fit: contain; } /* Option 2: Flexbox Rules */ .img-flex { align-self: center; flex: 0 0 auto; }
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!