"Layout Tip" Auto-Expand Element Height Before Images Load

In mobile development, some elements are auto-expanded based on image height, and the height cannot be hardcoded (e.g., the outer element of a carousel). On slow networks, images take time to load, leaving the element's height unexpanded and causing undesirable layout shifts. In this case, you can set the following styles to define the element's height:

.wrapper
  overflow hidden
  width 100%
  height 0
  padding-bottom 26.66% // This value is the image's height-to-width ratio, i.e., height/width
  background #eee

In the code above, the padding-bottom value is the image's height-to-width ratio (i.e., height/width). It is calculated as 26.66% of the width value, so the final element height matches the height after the image loads.

You can also use the vw approach, though some browsers may have compatibility issues:

.wrapper
  width 100%
  height 26.66vw
  background #eee

vw，viewpoint width，视窗宽度，1vw=视窗宽度的1%

vh，viewpoint height，视窗高度，1vh=视窗高度的1%

更多 CSS单位 (opens new window)。