如何仅使用 CSS 来响应式地维护 Div 的长宽比？

如何通过响应式调整大小来保持 Div 宽高比

虽然 CSS 允许图像使用基于百分比的宽度或高度来保持其宽高比，但相同的技术可能不会似乎直接适用于其他元素。但是，可以使用纯 CSS 来保持 div 的纵横比。

解决方案：

利用 padding-top 百分比相对于包含内容的事实块的宽度。通过将其与嵌套 div 结构相结合，您可以创建长宽比锁定元素。

示例：

.wrapper {
  width: 50%;
  display: inline-block;
  position: relative;
}

.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

在此示例中， .wrapper div 的宽度为 50%。添加伪元素 (.wrapper:after) 来确定纵横比，在本例中为 16:9。嵌套的 .main div 填充整个 .wrapper div，确保在调整 .wrapper div 大小时内容保持指定的宽高比。

以上是如何仅使用 CSS 来响应式地维护 Div 的长宽比？的详细内容。更多信息请关注PHP中文网其他相关文章！