1.CSS3 vw 单位
1vw = 1% viewport width
<div class="vw">hello,viewport</div>
.vw {
width: 50%;
height: 50vw;
background: #ccc;
}
2.padding-bottom
<div class="placeholder"></div>
.placeholder {
width: 100%;
padding-bottom: 100%;/* padding百分比相对父元素宽度计算 */
height: 0;//避免被内容撑开多余的高度
}
3,padding-bottom+:after+absolute
<div class="square">
<div class="content">
Hello!
</div>
</div>
.square {
width: 50%;
background: #ccc;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
利用vw,margin,padding