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