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;
}

• align-self : le centre aligne l'image verticalement dans le conteneur.
• flex : 0 0 auto empêche l'image de s'étirer ou de se rétrécir le long de l'axe de flexion (c'est-à-dire verticalement).

Exemple en direct :

<div class="slider">
  <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
  <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
  <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
  <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" 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!