Comment puis-je redimensionner des images en HTML tout en préservant les proportions ?

Préserver les proportions lors du redimensionnement de l'image

Lorsque vous travaillez avec des images, il est crucial de conserver leurs proportions pour garantir qu'elles apparaissent correctement. Cependant, spécifier à la fois les attributs de largeur et de hauteur en HTML entraîne souvent des distorsions.

Considérez le code HTML suivant :

<img src="/static/imghwm/default1.png" data-src="big_image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="">

Pour redimensionner l'image tout en préservant ses proportions, appliquez le CSS suivant règle :

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

L'affichage : bloquer ; La propriété garantit que l'image se comporte comme un élément de bloc, lui permettant de remplir la largeur de son conteneur. La propriété max-width définit la largeur maximale de l'image, garantissant qu'elle ne dépasse pas cette largeur tout en préservant sa hauteur.

Ce CSS s'applique également au HTML 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 redimensionner des images en HTML tout en préservant les proportions ?" >

Grâce à cette approche, les images de différentes dimensions seront redimensionnées proportionnellement, en préservant leurs proportions tout en respectant la largeur maximale spécifiée.

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!