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

Lorsque vous travaillez avec des images, il est souvent nécessaire de les redimensionner à 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 :

Au départ, les dimensions spécifiées et les règles CSS personnalisées ont été utilisées pour redimensionner. l'image, mais les proportions n'ont pas été conservées :

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 :

• affichage : block; : garantit que l'image peut circuler dans le contenu de la page.
• max-width:230px; : définit la largeur maximale du 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 limites max-width et max-height:95px; -contraintes de hauteur.
• height: auto; : Ajuste automatiquement la hauteur en fonction de l'aspect inhérent de l'image ratio.

Résultat :

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

This image is originally 400x400 pixels, but should get resized by the CSS:

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

Obtient une image redimensionnée dans les dimensions maximales spécifiées tout en conservant son rapport hauteur/largeur d'origine.