实现元素宽高比例为1:1

overflow: hidden;
width: 50%;
heigth: 0;
padding-bottom: 50%


1、如果一个元素的height值为百分比,则其高度是相对于父元素的宽度而言,对于padding-bottom和padding-top也是。

2、计算overflow时,内容区域和padding区域都会计算进去,即使设置了overflow:hidden,padding区域也会显示。


综上所述,可以用padding-bottom来代替高度,将height设置为0,实现固定宽高比例

posted @ 2020-01-07 16:25  恒若  阅读(745)  评论(0)    收藏  举报