Comment puis-je redimensionner les images tout en conservant les proportions à l'aide de CSS ?

Forcer le redimensionnement de l'image tout en conservant les proportions

Lorsque vous travaillez avec des images, il est souvent nécessaire de redimensionner les images à des dimensions spécifiques. Cependant, la préservation des proportions garantit que les images n'apparaissent pas déformées ou étirées.

Tentative initiale :

Initialement, les dimensions spécifiées et les règles CSS personnalisées ont été utilisées pour redimensionner. l'image, mais le rapport hauteur/largeur n'était pas maintenu :

<img src="big_image.jpg" width="900" height="600" alt="" />

img {
  max-width: 500px;
}

Solution :

Pour forcer le redimensionnement de l'image tout en préservant les proportions, les propriétés CSS suivantes peuvent être utilisées :

• display: block; : garantit que l'image peut circuler dans la page content.
• max-width:230px; : définit la largeur maximale de l'image.
• max-height:95px; : définit la hauteur maximale de l'image.
• width: auto; : permet à l'image de remplir automatiquement l'espace disponible dans les contraintes de largeur maximale et de hauteur maximale.
• hauteur : auto; : Ajuste automatiquement la hauteur en fonction du rapport hauteur/largeur inhérent à l'image.

Résultat :

Application de ces règles CSS à l'image :

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.sstatic.net/aEEkn.png">

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

Il en résulte une image redimensionnée dans les dimensions maximales spécifiées tout en conservant son aspect d'origine 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!