How to make the picture adapt to height without distortion in a fixed width container?

Adaptive width of web page pictures, maintain proportion: perfectly solve the problem of image distortion

In web design, it is often necessary to embed pictures in a container of fixed width, while ensuring that the pictures are not distorted. This article will use a practical case to explain how to make the picture adapt to the height within a fixed-width container and maintain its original proportion.

Problem: The developer uses a div container with a width of 50% to display the image, but the original width of the image is much larger than the container width, causing the image to be deformed. The original code is as follows:

<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="How to make the picture adapt to height without distortion in a fixed width container?">
</div>

Goal: Set only the image height so that the image width automatically adapts to the container width to avoid image distortion.

Solution: Control the image display method through CSS style. Set width property of the image to auto and height property to 100% . In this way, the image height will fill the parent container, and the width will be automatically adjusted according to the original proportion of the image to ensure that the image proportion remains unchanged. The modified code is as follows:

<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>

Through the above method, the picture will perfectly adapt to the container of 50% width while maintaining its original proportion, completely solving the problem of image distortion.

The above is the detailed content of How to make the picture adapt to height without distortion in a fixed width container?. For more information, please follow other related articles on the PHP Chinese website!