不用vh,vw,vmin,vmax,rem,em单位,不用js,如何获得一个锁定高宽比的响应式盒子?(这种方法只适合放背景图,不适合写内容)

给个提示:padding-top/bottom 的百分比值是根据宽度计算的。

.FlexEmbed--3by1:before {

padding-bottom: 33.33333%;

}

.FlexEmbed--2by1:before {

padding-bottom: 50%;

}

.FlexEmbed--16by9:before {

padding-bottom: 56.25%;

}

.FlexEmbed--4by3:before {

padding-bottom: 75%;

}

来源:知乎

https://www.zhihu.com/question/48677424

你可能感兴趣的:(不用vh,vw,vmin,vmax,rem,em单位,不用js,如何获得一个锁定高宽比的响应式盒子?(这种方法只适合放背景图,不适合写内容))