如何仅使用 CSS 来保持 Div 的长宽比？-css教程-PHP中文网

如何仅使用 CSS 来保持 Div 的长宽比？

Mary-Kate Olsen

发布： 2024-12-21 04:17:19

原创

890 人浏览过

How to Maintain Aspect Ratio of a Div Responsively Using Only CSS?

使用 CSS 保持纵横比的响应式 Div

当尝试在调整 div 大小时保持纵横比时，您可以利用CSS 不依赖 JavaScript。

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

登录后复制

在此示例中，包装器 div 设置所需的宽度 (50%)。 wrapper:after 伪元素使用相对于包装器宽度的 padding-top 百分比。值 56.25% 对应于 16:9 的宽高比。

主 div 填充整个包装器 div，保持包装器上的 padding-top 百分比指定的宽高比：after 伪元素。

通过利用 CSS，您可以轻松地保持 div 的宽高比，同时响应性地调整其大小，而无需引入 JavaScript。

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