Comment conserver la largeur d'image d'origine lors de l'utilisation de CSS « object-fit : contain » ?

Ajustement d'objet CSS : contenir ; Conserver la largeur de l'image d'origine dans la mise en page

Lors de l'utilisation de la propriété object-fit: contain de CSS pour redimensionner les images dans les conteneurs flexbox, les images elles-mêmes peuvent être mises à l'échelle de manière appropriée tandis que la mise en page conserve la largeur de l'image d'origine. Cela peut entraîner l'apparition d'une barre de défilement horizontale.

Pour comprendre pourquoi cela se produit, il est important de comprendre comment fonctionne l'ajustement d'objet. Examinons un exemple plus simple :

<code class="css">.box {
  width: 300px;
  height: 300px;
  border: 1px solid;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}</code>

<code class="html"><div class="box">
  <img src="https://picsum.photos/300/200?image=1069">
</div></code>

Dans ce scénario, l'élément img est invité à s'insérer entièrement dans le conteneur .box tout en préservant ses proportions. Cependant, comme le conteneur a une largeur fixe, l'image elle-même peut ne pas avoir suffisamment d'espace pour se développer.

C'est là que object-fit: contain entre en jeu. Il réduit l'image pour l'adapter aux contraintes de largeur et de hauteur du conteneur. Cependant, la largeur d'origine de l'élément img reste la même. En effet, les propriétés width et height de l'élément img n'affectent que la taille affichée de l'image, et non la taille réelle de l'image sous-jacente.

Pour résoudre le problème dans votre code d'origine, vous pouvez envisager :

• Utilisation de width : 100 % et height : auto sur l'élément img, lui permettant de s'adapter naturellement à son rapport hauteur/largeur d'origine.
• Ajout d'un débordement : masqué à l'élément conteneur pour éviter la barre de défilement horizontale d'apparaître.

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!