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

html-css08

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

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

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

换句话就是说, padding-top 和 padding-bottom 的值为百分比时,其实表示的是其元素宽度的百分比。

因此,在容器宽度不确定的情况下(如: 80% , flex: 1 等),保持容器宽高比不变,可以通过设置元素的 padding-top 或 padding-bottom 值。

例如,保持宽高比为16:9:

这个在保持图片的宽高比时非常有用。

添加box-sizing:border-box,容器内子元素增加padding,border。

容器宽度都不会被撑开。

或者是在容器里边添加一个无用的div块标签,不指定宽度高度,也是可以的

padding:50px 1px 指的是内边距的,上和下是50px,左和右是1px;

padding:50px ,1px 指的是内边距的上下左右都是50px。而1px不会显示