La largeur d'image dans le conteneur div est adaptative, la hauteur est fixe et non déformée. Comment y parvenir?

Affichage adaptatif des images Web: maintenir les proportions et éviter la déformation

Le redimensionnement d'image est un problème courant dans la conception Web. Lorsque la largeur d'image dépasse le conteneur, comment maintenir la proportion d'image sans distorsion est un défi pour de nombreux développeurs. Cet article expliquera en détail comment résoudre ce problème via un cas.

Problème: Un conteneur Div d'une largeur de 50% doit contenir une image large. Le mettre directement entraînera la compression et la déformation de l'image. L'objectif est: la hauteur de l'image est fixe, la largeur est automatiquement adaptée au conteneur, tout en maintenant les proportions d'origine pour éviter la distorsion.

Code initial:

<div style="width:50%;">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174277896468460.png" class="lazy" alt="La largeur d'image dans le conteneur div est adaptative, la hauteur est fixe et non déformée. Comment y parvenir?">
</div>

Solution: utilisez les attributs CSS pour contrôler la méthode d'affichage de l'image pour atteindre la largeur d'image adaptative et la hauteur fixe.

Code modifié:

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

Avec width: auto; height: 100%; , la largeur de l'image sera automatiquement ajustée en fonction de la largeur du conteneur, et la hauteur sera définie à 100% de la hauteur du conteneur. De cette façon, l'image peut maintenir sa proportion d'origine et être affichée dans le conteneur intact pour éviter la déformation.

Point clé: le conteneur parent DIV doit définir une hauteur claire (par exemple, height: 200px; ou utiliser d'autres méthodes pour déterminer la hauteur), sinon la hauteur de l'image ne peut pas être déterminée et l'effet adaptatif ne peut pas être obtenu. Vous pouvez ajuster la hauteur du conteneur parent en fonction des besoins réels.

Grâce aux méthodes ci-dessus, vous pouvez facilement résoudre le problème de la largeur adaptative, de la hauteur fixe et des images non déformées dans le conteneur Div, améliorant l'effet global de la disposition des pages Web.

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!