web-dev-qa-db-fra.com

Pourquoi l'objet-fit ne fonctionne-t-il pas dans la flexbox?

J'ai plusieurs colonnes auxquelles je donne une largeur égale en utilisant flex. Chacune contient des balises img, et j'aimerais que ces images présentent le dimensionnement object-fit: cover.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  object-fit: cover;
}
<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

Les images ne sont pas en train de redimensionner, comme on peut le voir dans cette démo . Pourquoi donc?

htmlcsscss3flexbox
15
Jack Guy

À partir de spécification :

La propriété object-fit spécifie comment le contenu d'un fichier .__ remplacé. L'élément doit être monté sur la boîte établie en fonction de sa hauteur et de largeur.

Le terme clé étant: adapté à la boîte établie en fonction de la hauteur et de la largeur utilisées

L'image est remplacée, pas son conteneur. Et la boîte établie par sa hauteur et sa largeur utilisées se rapporte à l'image elle-même, pas à son conteneur.

Alors, jetez le conteneur et faites les images elles-mêmes les éléments flexibles.

.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>

Code révisé

Détails supplémentaires

5.5. Dimensionnement des objets: le object-fit propriété

La propriété object-fit spécifie comment le contenu d'un fichier .__ remplacé. L'élément doit être monté sur la boîte établie en fonction de sa hauteur et de largeur.

Voici trois des valeurs:

  • cover

    Le contenu remplacé est dimensionné pour conserver ses proportions tout en remplir toute la zone de contenu de l'élément.

  • contain

    Le contenu remplacé est dimensionné pour conserver ses proportions tout en ajustement dans la zone de contenu de l'élément.

  • fill

    Le contenu remplacé est dimensionné pour remplir la zone de contenu de l'élément.

Avec cover, l'image conserve son format d'image et couvre tout l'espace disponible. Avec cette option, une grande partie de l'image peut être recadrée en dehors de l'écran.

Avec contain, le rapport de format est également conservé, mais l'image est redimensionnée pour s'adapter à la zone. Cela peut entraîner des espaces à gauche et/ou à droite (ajustement Portrait) ou en haut et/ou en bas (ajustement Paysage). La propriété object-position peut être utilisée pour déplacer l'image dans sa boîte.

Avec fill, le rapport de format est abandonné et l'image est redimensionnée pour s'adapter à la boîte.

Compatibilité du navigateur

A ce jour, object-fit n'est pas pris en charge par Internet Explorer . Pour une solution de contournement, voir:

21
Michael_B

Le problème est que object-fit spécifie comment une image est peinte dans la img, mais vous n'avez pas spécifié la taille de ces éléments, mais uniquement celle de leurs parents .test.

Donc, une alternative à La réponse de Michael_B donne aux images la même taille que les éléments flex:

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}


.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

12
Oriol

Pour ceux qui ne peuvent pas simplement "supprimer le conteneur et transformer les images elles-mêmes en éléments flexibles", ajoutez simplement des niveaux de conteneur:

<div class="display-flex">
  <div class="flex-grow position-relative">
    <div class="pos-absolute top-left-right-bottom-0">
      <img class="object-fit-cover height-width-100">
0
btown