Comment préserver les proportions lors de l'ajustement d'une image dans une division ?

Préserver les proportions lors de l'ajustement d'une image dans une division

Lors de l'affichage d'une image dans un espace restreint, il est souvent souhaitable de l'ajuster sans compromettre son rapport hauteur/largeur. HTML et CSS offrent une solution élégante pour y parvenir.

Approche

La clé pour conserver les proportions de l'image est d'utiliser les propriétés CSS max-height et max-width. Voici comment l'implémenter :

1. Définissez la hauteur et la largeur du div : Déterminez la hauteur et la largeur souhaitées du div pour contenir l'image.

2. Appliquer la hauteur maximale et la largeur maximale à l'image :

   • hauteur maximale : 100 % ; : garantit que la hauteur de l'image ne dépasse pas la hauteur du div.
   • max-width : 100 % ; : empêche la largeur de l'image de déborder sur la largeur du div.

Ce faisant, l'image rétrécira ou s'agrandira dans le div. limites tout en préservant ses proportions.

Exemple

Considérons le code HTML et CSS suivant :

<div>

Dans cet exemple, l'image "mon-image.jpg" ajustera dynamiquement sa taille pour l'adapter au div 48x48, en conservant ses proportions d'origine.

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!