CSS makes the Picture Adaptive container (div) size

When we write the page often encounter the need to adapt to the size of the image container, the following I would like to point out how to achieve such an effect.

<div>
        
</div>

1 2 3

Please note that the image size here is 200x200px

div {
    width:400px;
    height:400px;
    border:1px solid #000;
    }
img {
    width:100%;
    height:100%;
}

1 2 3 4 5 6 7 8 9

Regardless of the size of the container, just set the width of the img to 100% (where 100% is relative to the parent's width) and it will be adaptive to the container.

Is that just the simple end of it? This is OK if you don't mind if the image is magnified and the distortion may occur.
If you mind that the image will be distorted after zooming in, we can improve the above code by simply modifying the IMG style.

img {
    max-width:100%;
    max-height:100%;
}

1 2 3 4

The difference between max-width:100% and width:100% is that the max-width is relative to the size of the IMG itself. It means that the maximum width of the picture is its own size, and here is the 100px. And the width of the 100% we have said above is relative to the parent width, so in order not to let the image is magnified after the distortion we can set the maximum size of the IMG size, the more popular is only allowed to zoom out not allowed to enlarge the IMG.

Whether the choice of width:100% or max-width:100% depends on the individual's needs, and in the case of responsive design, the problem is slightly more complicated.

Response Type

Responsive design: If it is an IMG tag introduced in the picture, you can use lazy loading method to load, before actually loading the picture with JS to check the window width, and then load different resolutions of the picture, such as width <=480, load 80px width of the picture, 480 < width <= 768, load 120px picture, Width > 768 load 160px Picture, if the width is 600px how to do it, by percentage to zoom 120px picture to achieve the appropriate results.

The advantage of this is that for mobile devices, the downloaded image will be smaller, reducing the time it takes to load the page. However, the problem is that when the vertical screen is toggled horizontally or the width of the browser window is enlarged, the image will be blurred by zooming in.

I think the response to the design of the picture should start from the layout design, try to make the picture in the width of each window is not too large, by arranging more content rather than enlarge the size of the image to fill the space due to the expansion of the browser window. This can effectively reduce the problem of image amplification blurred.

Finally, if your img is used as a background, you need to set the size of the picture in the container by Background-size:cover/contain or by a specific percentage. Here is not detailed introduction, is interested in W3school to understand the next. Want to learn about the picture in the div vertically centered adaptive friend tap below the link ↓

All blogs have been transferred to a personal blog: www.clramw.top

Related articles recommended:

The picture is vertically centered in the container adaptive

Top article: Seven ways to clear floating float and compatibility handling