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

【问题标题】：Keep aspect ratio of div. while using max-width保持div的纵横比。在使用最大宽度时
【发布时间】：2019-03-17 21:50:01
【问题描述】：

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

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

我试过了……

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

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

【问题讨论】：

使用 % 最大宽度而不是 px
@CyberJ 你试过我的答案了吗？
@fcalderan 是的，效果很好！谢谢！投票

标签： html css

【解决方案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;
}

【讨论】：