CSS implements an aspect ratio adaptive container

In the recent development of mobile pages, I came across a situation where when the page is 100% wide, the height is half the width and still half the width depending on the width of the phone. We then need to implement a container that is half width adaptive and half height wide. Let’s take the height as half the width for example, or any other ratio. This problem is similar to: we have an image with 100% width on the mobile page. If we do not set the height, the image will be scaled in proportion to the original size. We can use this idea to set the height of an element in proportion to its height. The so-called viewport units refer 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 make use of this feature to realize the mobile aspect ratio adaptive container.

Why is the height of box 51.5 VW? The reason is that the original size of the image was 884 * 455 in aspect ratio, i.e. 455/884 = 51.5%. This method has an advantage over the original image scaling: regardless of whether the image is successfully loaded or not, the container height is always calculated, which does not cause page jitter or redraw, thus improving performance. < span style = “box-sizing: border-box; color: RGB (51, 51, 51); line-height: 20px; font-size: 14px! Important; word-break: inherit! Important;” The padding percentage of the child element is the width of the parent container first. Here look at the following code and renderings to understand:

We set the width of the parent. Box to 200px, and the padding of the child. Text element to 10%. Next, in combination with the theme, we use this principle to realize the problem of equal proportions:

Padding of the text – bottom: 51.5%; It is also calculated using the ratio of width to height of the image’s original size. Note that.text is set to height: 0; To avoid this, set height: 0; . Link: https://juejin.cn/post/6844903908289019911