Pourquoi « object-fit » ne fonctionne-t-il pas avec les conteneurs Flexbox ?

Pourquoi l'ajustement d'objet ne fonctionne pas dans Flexbox

Malgré des problèmes rencontrés lors de la mise en œuvre de l'ajustement d'objet dans Flexbox, où les images à l'intérieur les colonnes de largeur égale ne sont pas ajustées, il existe une explication logique ancrée dans la définition de la propriété.

Comme indiqué dans le spécification, l'ajustement de l'objet dicte la façon dont les éléments remplacés (les images dans ce cas) s'inscrivent dans la boîte définie par leur hauteur et leur largeur. Cependant, le point crucial à comprendre est que la boîte concerne l'image elle-même, pas son conteneur.

Par conséquent, pour résoudre le problème, supprimez complètement le conteneur et attribuez le statut flex-item directement aux images, comme démontré dans l'extrait de code mis à jour :

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

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

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!