Maison > interface Web > tutoriel CSS > Pourquoi « object-fit » ne fonctionne-t-il pas avec les conteneurs Flexbox ?

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

Barbara Streisand
Libérer: 2024-12-04 04:51:13
original
981 Les gens l'ont consulté

Why Doesn't `object-fit` Work with Flexbox Containers?

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal