Comment redimensionner correctement les images à l'aide de l'ajustement d'objet : contenir

Comprendre l'ajustement d'objet : contenir et le redimensionnement d'image

Lors de l'utilisation de l'ajustement d'objet CSS : contenir pour rendre les images réactives dans les conteneurs flexbox, il est essentiel pour comprendre comment cette propriété affecte la largeur de l’image. Malgré le redimensionnement des images, la mise en page peut conserver la taille d'origine de l'image, ce qui entraîne une barre de défilement.

Dans object-fit: contain, l'image est mise à l'échelle proportionnellement afin que l'image entière reste dans le conteneur spécifié tout en préservant son rapport hauteur/largeur. Cela garantit que l’image est entièrement visible et évite le recadrage. Cependant, il ne redimensionne pas nécessairement l'image pour l'adapter à la largeur de son conteneur.

Pour résoudre ce problème, vous devez définir la propriété CSS width du conteneur sur une valeur ou un pourcentage spécifique que vous souhaitez que l'image à afficher à.

Par exemple, si vous avez le HTML suivant :

<code class="html"><div class="container">
  <img src="image.jpg" />
</div></code>

Et le CSS suivant :

<code class="css">.container {
  width: 50%;
  height: 50%;
}

img {
  object-fit: contain;
}</code>

L'image sera mise à l'échelle proportionnellement pour tenir dans le .container, mais la largeur de l’image restera sa taille d’origine. Pour ajuster la largeur du conteneur, vous pouvez spécifier la largeur du .container sous forme de pourcentage ou de valeur absolue :

<code class="css">.container {
  width: 100vw;  // 100% of the viewport width
}

// or

.container {
  width: 500px;  // 500 pixels
}</code>

N'oubliez pas que l'ajustement de l'objet : contain garantit uniquement que l'image est visible dans le conteneur. sans recadrage. Si vous devez redimensionner l'image spécifiquement à la largeur du conteneur, vous devez définir la propriété width du conteneur en conséquence.

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!