一、元素等比缩放解决方案
<style>
/*等比缩放*/
.box{
position: relative;
width: 50%; /* desired width */
background: #000;
color: #fff;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
background: #f00;
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
<div class='box'>
<div class='content'>1:1</div>
</div>
包含内容的元素使用绝对定位布局,利用元素的padding的百分比属性去设置元素的高度。
padding可以设置的值:
1、长度,非负的固定宽度
2、百分比,相对于父元素的宽度。