Comment puis-je conserver les proportions de l'image lors du redimensionnement avec CSS ?

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

Les proportions d'image sont cruciales pour conserver les proportions d'origine d'une image lors du redimensionnement. Ce problème devient apparent lorsque les images ont des attributs de largeur et de hauteur prédéfinis et que des règles CSS supplémentaires sont appliquées.

Par exemple, dans le code fourni ci-dessous, l'image "big_image.jpg" a sa hauteur et sa largeur explicitement définies comme 600. et 900 pixels, respectivement :

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

Pour forcer le redimensionnement de l'image tout en conservant le rapport hauteur/largeur, des règles CSS peuvent être utilisées. Dans ce cas, la règle CSS suivante peut être utilisée :

img {
    max-width: 500px;
}

Cependant, cette règle CSS ne peut pas réduire l'image à sa taille appropriée. Pour résoudre ce problème, des propriétés CSS supplémentaires doivent être utilisées :

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

Avec ces propriétés CSS, l'image "big_image.jpg" sera redimensionnée tout en préservant ses proportions. Ceci est illustré par le code HTML et CSS 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 conserver les proportions de l'image lors du redimensionnement avec CSS ?" >

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!