Comment puis-je forcer le redimensionnement des images en CSS tout en préservant les proportions ?

Préserver les proportions tout en forçant le redimensionnement des images

Lorsque vous traitez des images dans le développement Web, il est crucial de conserver les proportions d'origine pour éviter distorsion. Par défaut, la mise à l'échelle des images à l'aide de propriétés CSS telles que la largeur et la hauteur peut modifier leurs proportions.

Résoudre le problème

Pour résoudre ce problème, des règles CSS peuvent être utilisées pour forcer le redimensionnement tout en préservant les proportions. L'extrait de code suivant réalise cette fonctionnalité :

img {
  display: block;
  max-width: 500px;
  width: auto; 
  height: auto;
}

L'affichage : block ; La propriété garantit que l'image se comporte comme un élément de bloc, occupant toute la largeur disponible. largeur maximale : 500 px ; définit une largeur maximale pour l'image, en veillant à ce qu'elle ne dépasse pas 500 pixels.

Essentiellement, width: auto; et hauteur : auto ; permettre à l’image d’ajuster automatiquement sa taille tout en conservant son rapport hauteur/largeur. Cela signifie que l'image sera redimensionnée pour s'adapter à la largeur maximale spécifiée sans déformer sa hauteur ni provoquer d'étirement ou d'écrasement.

Exemple d'utilisation

Considérez le code suivant :

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Comment puis-je forcer le redimensionnement des images en CSS tout en préservant les proportions ?" >

Appliquer les règles CSS à cette image la forcera à se redimensionner dans la largeur maximale spécifiée, tout en préservant son aspect rapport.

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!