Comment réparer le débordement et la distorsion de l'image avec CSS Object-Fit ?

Ajustement d'objet CSS : conserver le rapport hauteur/largeur de l'image dans les mises en page réactives

Lors de l'utilisation de l'ajustement d'objet CSS : propriété contenir pour garantir que les images restent réactives dans les conteneurs flexbox, vous pouvez rencontrer un problème où la mise en page conserve la largeur d'origine de l'image, ce qui entraîne des barres de défilement inutiles.

Comprendre l'ajustement d'objet

Avant d'approfondir le problème À présent, clarifions comment fonctionne l'ajustement d'objet. La propriété définit la manière dont le contenu d'un élément doit être mis à l'échelle et positionné dans son cadre de délimitation. Lorsqu'il est défini pour contenir, le contenu (dans notre cas, l'image) sera redimensionné proportionnellement, en conservant ses proportions et en s'adaptant à l'espace disponible.

Le problème de largeur d'image d'origine

Dans l'extrait de code fourni, vous avez défini des conteneurs avec overflow: auto, qui introduit une barre de défilement lorsque le contenu dépasse la largeur du conteneur. Cependant, la largeur de l'image reste à sa taille d'origine, ce qui oblige la mise en page à s'adapter aux dimensions initiales de l'image.

Solution

Pour remédier à cela, vous devez définir explicitement la largeur des images en utilisant la propriété width de CSS. Cela garantira que la largeur de l'image est conforme à la largeur du conteneur, permettant à la propriété d'ajustement d'objet de mettre à l'échelle et de positionner correctement l'image tout en préservant ses proportions.

Code mis à jour

Voici une version mise à jour de votre code CSS qui inclut la propriété width :

<code class="css">img {
  object-fit: contain;
  width: 100%;
}</code>

En ajoutant la règle width : 100 %, vous demandez au navigateur d'adapter précisément la largeur de l'image à son conteneur, permettant à la propriété object-fit: contain de fonctionner comme prévu.

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!