Comment préserver le rapport hauteur/largeur de l'image dans une division à l'aide de CSS ?

Préserver les proportions d'une image à l'intérieur d'une div

Souvent, il est souhaitable d'afficher une image dans une div tout en conservant ses proportions. Cela garantit que l’image est entièrement visible sans aucune distorsion. Pour y parvenir, vous pouvez exploiter des propriétés CSS spécifiques.

Solution utilisant CSS :

À l'intérieur du div où l'image est placée, ajoutez les règles CSS suivantes à l'image element :

max-height: 100%;
max-width: 100%;

Ces propriétés CSS demandent au navigateur de contraindre les dimensions de l'image dans les limites du div. La propriété max-height limite la taille verticale, tandis que max-width limite la taille horizontale. En définissant les deux propriétés à 100 %, l'image est réduite pour s'adapter au div tout en préservant ses proportions d'origine.

Exemple :

<div class="image-container">
  <img src="image.jpg" />
</div>

.image-container {
  width: 48px;
  height: 48px;
}

.image-container img {
  max-height: 100%;
  max-width: 100%;
}

Cet exemple insérera une image 48x48 dans un div 48x48 tout en conservant le rapport hauteur/largeur de l'image. L'image sera redimensionnée pour s'afficher entièrement dans le div sans aucun recadrage ni distorsion.

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!