Question

我知道我可以使用CSS来实现响应平方div来保持其apsect比率：

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

我尝试过...

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

div保持其宽高比宽度为520px，但是当屏幕较小时，其高度保持不变。因此，我得到了更多的高度，而不是正方形的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元素）进行计算

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

1 个答案: