html - 保持 div 的纵横比。使用最大宽度时

Question

我知道我可以像这样使用 CSS 实现响应式方形 div，以保持其纵横比:

问题是，div 大小总是相对于父级/窗口。只要窗口/屏幕不小，我希望 div 具有固定的最大宽度。就像您使用普通的响应式图像一样。这可能吗？

我试过...

.some-class {
  width: 100%;
  padding-bottom: 100%;
  max-width: 520px;
}

div 保持其纵横比宽度为 520 像素宽度，但当屏幕较小时，高度保持不变。所以我得到了更高的高度，而不是方形的 div。它不保持纵横比。

Answer 1

您可以将 padding-bottom 应用于其 ::before 伪元素，例如

.some-class {
  width: 100%;
  max-width: 520px;
  border: 1px #9bc solid;
}
.some-class::before {
   padding-bottom: 100%;
   content: "";
   display: inline-block;
   vertical-align: top;
}

demo

这样做时，填充总是相对于 div 的实际宽度而不是其祖先的宽度(例如 body 元素)计算

---

更新 (05/2021)

在最新的浏览器上，您可以开始使用新的 aspect-ratio 属性，因此如果浏览器支持它，您可以简单地编写

.some-class {
  width: 100%;
  max-width: 520px;
  border: 1px #9bc solid;
  aspect-ratio: 1;
}