Shulou(Shulou.com)06/01 Report--

Editor to share with you how to make IMG automatically adapt to the size of the DIV container in html5. I hope you will get something after reading this article. Let's discuss it together.

In order to make IMG adaptive in size, I have made an example of horizontal adaptation as follows:

IMG style (stretch horizontally, auto match size vertically)

DIV style (element centered display)

IMG style

(stretch horizontally, automatically match size longitudinally):

Width:100%; height:auto

(stretch longitudinally, automatically match size horizontally):

Width:100%; height:auto

DIV style (element centered display):

Display:flex; align-items:center; justify-content:center

The practice is very simple, as long as you set the specific values of width and htight of the corresponding picture. Look at the following example:

Img {width:auto; height:auto; max-width:100%; max-height:100%;}

If you set the picture in this way, you can make the picture zoom in the specified space. Line 4 means:

The width of the width:auto; picture adapts itself (the width of the picture will be displayed as wide)

The height of the height:auto; picture adapts itself (as high as the picture is displayed)

The use of width:auto; and height:auto; together represents the original size of the display picture (it can be understood as having no effect)

The width of a max-width:100%; picture cannot exceed the width of the space in which the picture is located.

The height of a max-height:100%; picture cannot exceed the height of the space in which the picture is located.

The use of max-width:100%;max-height:100%; together means that the width and height of the image cannot exceed the width and height of the space in which it is located.

Sample code

Here are two images with different sizes and proportions. Using this method, the images can be automatically filled and centered:

Let the picture automatically adapt to the size of the DIV container. ShaShiDi {width:500px;height:400px;display:flex;align-items:center;justify-content:center; / * for obvious effect, you can open the following border to see the effect * / * border:1px solid black; * /}. ShaShiDi img {width:100%; height:auto;}

After reading this article, I believe you have a certain understanding of "how to make IMG automatically adapt to the size of DIV containers in html5". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.