Pourquoi « object-fit » ne fonctionne-t-il pas avec les images dans les colonnes Flexbox ?

Comprendre pourquoi « l'ajustement d'objet » ne fonctionne pas dans une Flexbox

Dans cette enquête, l'objectif est d'utiliser « l'ajustement d'objet » -fit: cover" propriété pour mettre à l'échelle les images dans les colonnes flexbox. Cependant, il a été constaté que les images restent non ajustées. Cet article clarifie les mécanismes sous-jacents et propose une solution.

Le principe derrière « l'ajustement d'objet »

Selon la spécification, « l'ajustement d'objet » indique comment un le contenu de l'élément remplacé s'insère dans la boîte définie par sa hauteur et sa largeur.

La clé Observation

Essentiellement, la propriété « object-fit » ne s'applique pas au conteneur parent mais à l'élément remplacé lui-même (dans ce cas, l'image).

Solution : Imbrication dans l'élément Flex

Pour résoudre le problème, les images doivent devenir les éléments Flex au lieu d'être imbriquées dans Flex. conteneurs.

Code révisé

.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="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="Pourquoi « object-fit » ne fonctionne-t-il pas avec les images dans les colonnes Flexbox ?" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="Pourquoi « object-fit » ne fonctionne-t-il pas avec les images dans les colonnes Flexbox ?" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="Pourquoi « object-fit » ne fonctionne-t-il pas avec les images dans les colonnes Flexbox ?" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="Pourquoi « object-fit » ne fonctionne-t-il pas avec les images dans les colonnes Flexbox ?" >
</div>

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!