In mobile development, some elements are automatically spaced based on the height of the image and cannot be written to death (e.g. the outer elements of the wheel image). On a slow network, images take some time to load, and the height of the element is not spread out, which can have an unwanted effect on the layout of the page. In this case we can set the height of the element as follows:

.wrapper overflow Hidden Width 100% height 0 PADDing-bottom 26.66% //Copy the code

In the code above, the padding-bottom value is the image aspect ratio (i.e., height/width), which is calculated based on the 26.66% width value. The final element height is the same as the image height after loading.

Vw’s approach can also be used, but there may be compatibility issues in some browsers:

.wrapper
  width 100%
  height 26.66vw
  background #eee
Copy the code

Viewpoint Width, vw, viewpoint width, 1vw= 1% of window width

Viewpoint height, 1vh= 1% of viewpoint height