The image width in the div container is adaptive, the height is fixed and not distorted. How to achieve it?

Adaptive display of web pictures: maintain proportions and avoid deformation

Image resizing is a common problem in web design. When the image width exceeds the container, how to maintain the image proportion without distortion is a challenge for many developers. This article will explain in detail how to solve this problem through a case.

Problem: A div container with a width of 50% needs to hold a wide picture. Putting it in directly will cause the picture to be compressed and deformed. The goal is: the image height is fixed, the width is automatically adapted to the container, while maintaining the original proportions to avoid distortion.

Initial code:

<div style="width:50%;">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174277896468460.png?x-oss-process=image/resize,p_40" class="lazy" alt="The image width in the div container is adaptive, the height is fixed and not distorted. How to achieve it?">
</div>

Solution: Use CSS attributes to control the image display method to achieve adaptive image width and fixed height.

Modified code:

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

With width: auto; height: 100%; , the image width will be automatically adjusted according to the container width, and the height will be set to 100% of the container height. In this way, the picture can maintain its original proportion and be displayed in the container intact to avoid deformation.

Key point: The parent container div must set a clear height (for example, height: 200px; or use other methods to determine the height), otherwise the image height cannot be determined and the adaptive effect cannot be achieved. You can adjust the height of the parent container according to actual needs.

Through the above methods, you can easily solve the problem of adaptive width, fixed height and undistorted images in the div container, improving the overall effect of web page layout.

The above is the detailed content of The image width in the div container is adaptive, the height is fixed and not distorted. How to achieve it?. For more information, please follow other related articles on the PHP Chinese website!