实现自适应的正方形效果，即让元素高度随宽度改变。
实现的思路是父元素设置宽度，子元素宽度100%，然后控制子元素撑开父元素的高度，撑开的高度和宽度成一定比例。正方形就是1:1，其他比例的实现原理相同。
有两种方式，
- 一种是使用子元素的padding-top或者padding-bottom撑开父元素高度，因为子元素的padding的百分比是相对于父元素的宽度。
- 另一种方法是用子元素的伪类将父元素高度撑开。
【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#block1 {
width: 100px;
}
.block1-wrapper {
width: 100%;
height: 0px;
background-color: red;
padding-bottom: 100%;
}
#block2 {
width: 100px;
}
.block2-wrapper {
position: relative;
width: 100%;
overflow: hidden;
background-color: blue;
}
.block2-wrapper::after {
content: '';
display: block;
margin-top: 100%;
}
.block2-content {
position: absolute;
}
</style>
</head>
<body>
<div id="block1">
<div class="block1-wrapper">123</div>
</div>
<div id="block2">
<div class="block2-wrapper">
<div class="block2-content">123</div>
</div>
</div>
</body>
</html>
网友评论