有没有一种方法可以在 CSS 中将 div 的宽度设置为其高度？ [复制]

Question

在 CSS 中，如果我想将 div 的高度设置为宽度，我可以使用padding-bottom:100%。但是，我想将某个 div 的高度设置为视口高度，并让 div 的宽度调整大小以使 div 为正方形。在 CSS 中有没有这样做的方法？

Answer 1

如果您打算将其高度设置为视口高度，您也可以将其宽度设置为视口高度：

.square {
  height: 100vh;
  width: 100vh;
}

如果你不熟悉这个单位：1vh 代表视图高度的百分之一。

编辑：根据您希望设计的响应速度，您还可以使用1vmin 单位，它代表屏幕最小边的 1%。

.square {
  height: 100vmin;
  width: 100vmin;
}

无论您的网站是以纵向模式还是横向模式查看，正方形始终会最大化其大小而不会导致页面滚动。