虽然设置的是垂直方向的高度,有意思的是当该值为一个百分比的时候表示的是和本身包含的元素的宽度有关。
换句话就是说, padding-top 和 padding-bottom 的值为百分比时,其实表示的是其元素宽度的百分比。
因此,在容器宽度不确定的情况下(如: 80% , flex: 1 等),保持容器宽高比不变,可以通过设置元素的 padding-top 或 padding-bottom 值。
例如,保持宽高比为16:9:
这个在保持图片的宽高比时非常有用。
1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%