Pourquoi l'ajustement d'objet ne fonctionne-t-il pas correctement avec les images contenues dans les conteneurs Flexbox ?

Pourquoi l'ajustement d'objet ne fonctionne-t-il pas dans Flexbox ?

Lorsqu'ils tentent d'appliquer la propriété object-fit: cover aux images dans les colonnes flexbox, les utilisateurs peuvent rencontrer le problème problème d'images qui ne sont pas redimensionnées comme prévu. L'explication réside dans les spécifications de la propriété object-fit.

Selon les spécifications CSS, object-fit détermine l'ajustement du contenu de l'élément remplacé dans la boîte établie par sa hauteur et sa largeur utilisées. Dans le cas des images, l’élément remplacé est l’image elle-même et non son conteneur. Par conséquent, la propriété object-fit s'applique à la hauteur et à la largeur de l'image, plutôt qu'aux dimensions de l'élément flexible.

Solution :

Pour surmonter ce problème, restructurez le configuration de la flexbox de telle sorte que les images elles-mêmes deviennent les éléments flexibles. Cela permet d'appliquer efficacement la propriété d'ajustement d'objet aux images, ce qui entraîne le comportement de redimensionnement souhaité.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

<div class="container">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

En faisant des images les éléments flexibles, la propriété d'ajustement d'objet peut désormais correctement ajustez les images dans l'espace du conteneur flexible alloué, ce qui entraîne le comportement de dimensionnement de couverture souhaité.

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!