Comment faire en sorte que l'image s'adapte à la hauteur sans distorsion dans un conteneur de largeur fixe?

Largeur adaptative des images de pages Web, maintenir la proportion: résoudre parfaitement le problème de la distorsion de l'image

Dans la conception Web, il est souvent nécessaire d'incorporer des images dans un conteneur de largeur fixe, tout en veillant à ce que les images ne soient pas déformées. Cet article utilisera un cas pratique pour expliquer comment faire s'adapter l'image à la hauteur dans un conteneur à largeur fixe et maintenir sa proportion d'origine.

Problème: Le développeur utilise un conteneur Div avec une largeur de 50% pour afficher l'image, mais la largeur d'origine de l'image est beaucoup plus grande que la largeur du conteneur, ce qui entraîne la déformation de l'image. Le code d'origine est le suivant:

<div style="width:50%;">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174269005866879.png" class="lazy" alt="Comment faire en sorte que l'image s'adapte à la hauteur sans distorsion dans un conteneur de largeur fixe?">
</div>

Objectif: Définissez uniquement la hauteur de l'image afin que la largeur de l'image s'adapte automatiquement à la largeur du conteneur pour éviter la distorsion de l'image.

Solution: Contrôlez la méthode d'affichage de l'image via le style CSS. Réglez width de l'image sur auto et height à 100% . De cette façon, la hauteur de l'image remplira le conteneur parent, et la largeur sera automatiquement ajustée en fonction de la proportion d'origine de l'image pour s'assurer que la proportion d'image reste inchangée. Le code modifié est le suivant:

<div style="width:50%;">
  <img src="/static/imghw/default1.png" data-src="/seller/templates/img/bg_logo_left.png" class="lazy" alt=""   style="max-width:90%">
</div>

Grâce à la méthode ci-dessus, l'image s'adaptera parfaitement au conteneur de 50% de largeur tout en maintenant sa proportion d'origine, résolvant complètement le problème de la distorsion de l'image.

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!