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

html-css011

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

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

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

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

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

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

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

可以给要设置固定高宽比例的元素加上

max-width:300px

min-weidth

具体数值自己定义

注意不要再设置width

css固定宽度使用width属性来定义即可,如下这个案例。

<div class="box">这是一个宽度为300px的div</div> .box{width:300pxheight:200pxborder:1px solid #333}

这样子class名为box的这个div宽度就固定在了300px。