如何在没有 JavaScript 的情况下保持宽高比？

通过按比例调整宽度来维持纵横比

在不使用 JavaScript 的情况下根据元素的高度维持元素的纵横比可能是一个挑战。人们可能会考虑使用 padding-left 作为高度的百分比，但这种方法被证明是无效的。

考虑以下标记：

<code class="html"><div class="box">
  <div class="inner"></div>
</div></code>

目标是根据框的纵横比来保持其高度，根据百分比边距动态变化：

<code class="css">.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}</code>

幸运的是，存在一个原生 CSS 解决方案：纵横比属性。此属性允许您设置元素的宽度与高度的比率。

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 /1;
}</code>

在此示例中，框的流体高度为 50%，纵横比为 2:1。当您调整容器大小时，盒子将保持其纵横比，确保其始终保持比例平衡。

以上是如何在没有 JavaScript 的情况下保持宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！