CSS中如何保持容器宽高比不变的原理

html-css010

CSS中如何保持容器宽高比不变的原理,第1张

padding-top 和 padding-bottom 属性分别表示容器的上内边距与下内边距。

虽然设置的是垂直方向的高度,有意思的是当该值为一个百分比的时候表示的是和本身包含的元素的宽度有关。

换句话就是说, 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%