### 固定宽高比
确保具有可变 width 的元素将保持与其 `height 成比例的值。
- 在
::before伪元素上应用padding-top,使元素的height等于其width的百分比。 height与width的比例可以根据需要进行调整。例如,padding-top为100%将创建一个响应式正方形(1:1比例)。
<body>
<div class="constant-width-to-height-ratio"></div>
<style>
.constant-width-to-height-ratio {
background: #9C27B0;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
</style>
</body>
