时间戳

首页 > 解决方案 > 有没有一种方法可以在 CSS 中将 div 的宽度设置为其高度？

css - 有没有一种方法可以在 CSS 中将 div 的宽度设置为其高度？

问题描述

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

标签： css

解决方案

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

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

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

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

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

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

推荐阅读