使用 CSS 响应式调整 Div 大小时如何保持宽高比？

响应式地改变 Div 尺寸，同时保留纵横比

处理图像时，对其宽度或高度应用百分比值可保持其纵横比当它们膨胀或收缩时。然而，用其他元素复制这种行为可能具有挑战性。

幸运的是，CSS 提供了一种使用百分比链接元素的宽度和高度的解决方案，确保其纵横比保持一致。

使用 CSS 的解决方案

这可以通过令人惊讶的事实来实现，即 padding-top 属性的百分比值是相对于包含块的宽度。考虑以下 CSS 片段：

.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;
}

HTML 示例：

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

在此示例中，“.wrapper”div 将宽度设置为 50% (或任何所需的百分比）并为内部“.main”div 创建相对上下文。

“.wrapper:after”伪元素使用 padding-top 属性来建立 56.25% 的填充率。该比例代表 16:9 的宽高比，确保“.main”div 始终保持该宽高比。

最后，“.main”div 填充整个“.wrapper”容器，同时保留其宽高比比例并展示其深天蓝色背景和白色文本。

以上是使用 CSS 响应式调整 Div 大小时如何保持宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！