### 固定宽高比
确保具有可变 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>