Pourquoi mon « ajustement d'objet » ne fonctionne-t-il pas dans Flexbox ?

Object-Fit ne fonctionne pas dans Flexbox : la raison et la solution

Object-Fit est une propriété CSS qui contrôle la façon dont une image est redimensionnée pour s'adapter à son contenant. Cependant, dans une disposition flexbox, il peut sembler que l'ajustement d'objet ne fonctionne pas comme prévu.

La raison en est que l'ajustement d'objet opère sur l'élément remplacé lui-même, et non sur son conteneur. Dans ce cas, les images sont les éléments remplacés, pas le div wrapper.

Pour que l'ajustement des objets fonctionne comme prévu dans flexbox, les images doivent devenir les éléments flexibles. Ce faisant, vous définissez les propriétés flex sur les images elles-mêmes, garantissant que l'ajustement des objets est appliqué correctement.

Voici le code modifié :

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

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

Dans ce code mis à jour, les images sont les éléments flexibles, et l'ajustement d'objet leur est appliqué directement. Désormais, les images seront redimensionnées pour couvrir l'intégralité de leurs conteneurs tout en conservant leurs proportions.

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!