How to implement adaptive container with equal aspect ratio using CSS

When developing a mobile page recently, I encountered such a situation: when the page width is 100%, the height is half of the width, and remains half as the width of the phone changes.

So we need to implement a container with adaptive width and half height.

Here we take the example of the height being half of the width, but it can also be any other ratio.

1. Think about how to achieve it

This problem is similar to: we have a picture with a width of 100% on the mobile page. If we do not set the height, the picture will be scaled proportionally according to the original size.

We can use this idea to set a corresponding proportional height for the element according to the height of the element.

2. Implementation method 1 - through vw viewport units

The so-called viewport units are relative to the size of the viewport. 100vw is equal to 100% of the viewport width, that is, 1vw is equal to 1% of the viewport width.

We can use this feature to implement an adaptive container with equal aspect ratio on mobile devices.

HTML code:

<div class="box">
    <img src="http://images.pingan8787.com/2019_07_12guild_page.png" />
</div>

CSS code:

*{
    margin:0;
    padding:0
}
.box{
    width:100%;
    height:51.5vw
}
.box img{ 
    width:100%; 
}

Why is the .box height 51.5vw?

The reason is that the original size of the image is 884 * 455, with a width-to-height ratio of 455 / 884 = 51.5%.

Compared with the original proportional scaling of the image, this method has an advantage: regardless of whether the image is loaded successfully, the container height is always calculated, which will not cause page jitter or page redrawing, thereby improving performance.

Let's take a look at the comparison of successful and failed image loading in this case:

3. Implementation method 2 - through sub-element padding

This is achieved by setting the padding attribute of the child element. This is a common method and has better effects. What needs to be understood here is that the percentage value of the padding attribute of the child element refers to the width of the parent container first.

Here is the code and effect diagram below:

HTML code:

<div class="box">
    <div class="text">I am Wang Pingan, pingan8787</div>
</div>

CSS code:

.box{
    width: 200px;
}
.text{
    padding: 10%;
} 

analyze:

Here we set the width of the parent container .box to 200px and the padding of the child element .text to 10%, so the padding calculation result of .box is 20px;

Next, in conjunction with the topic, we use this principle to solve the problem of equal proportions:

HTML code:

<div class="box">
    <div class="text">
        <img src="http://images.pingan8787.com/2019_07_12guild_page.png" />
    </div>
</div>

CSS code:

.box{
    width: 100%;
}
.text{
    overflow: hidden;
    height: 0;
    padding-bottom: 51.5%;
}
.box .text img{
    width: 100%;
}

Here, padding-bottom: 51.5%; of .text is also calculated according to the first method, using the aspect ratio of the original size of the image. It should be noted that if .text is set to height: 0;, the height will be higher than the actual size. Therefore, in order to avoid this situation, you need to set height: 0;.

So we solved this problem in two ways.

Summarize

The above is the method that I introduced to you to achieve adaptive container with equal aspect ratio in CSS. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!