保持div的長寬比。 在使用最大寬度時

Question

我知道我可以像這樣使用CSS來實現響應方形div來保持其apsect比率：

問題是，div大小始終相對於父級/窗口。 我希望div具有固定的最大寬度，只要窗口/屏幕不小即可。 就像使用普通的響應圖像一樣。 這有可能嗎？

我試過了...

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

div保持其寬高比寬度為520px，但是當屏幕較小時，其高度保持不變。 因此，我得到了更多的高度，而不是正方形的div。 它不保持寬高比。

Answer 1

您可以將padding-bottom應用於其::before偽元素::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;
}

演示

這樣做總是相對於div的實際寬度而不是其祖先（例如body元素）的寬度來計算填充