制作一个当宽度根据百分比动态变化时为正方形

Question

我正在开发一个网络应用程序，它将根据用户对 N 的选择生成 NxN 网格。我希望网格的总宽度是相对的（即 100% 的可用空间），以便用户可以在各种纸张尺寸上进行打印。

我可以轻松地按 %（即：100%/N）计算网格中正方形的宽度，但在计算高度时遇到问题。网页的高度总是无限的，除非我人为地限制它，就像我说的，我不想这样做。

当网格的高度和宽度约束是动态的而不是正方形时，如何使网格中的正方形成为正方形而不是矩形？

Answer 1

有 3 种主要技术可以保持响应式元素的纵横比。
第一个是迄今为止最好的，适用于各种用例：aspect-ratio CSS 属性。其他 2 个可能适合其他用例：使用 padding 或 vw 单位：
（有关响应式正方形网格的完整解决方案，您可以查看此答案）

aspect-ratio 属性

这直接指定元素的长宽比。它可以基于元素的宽度或高度。 （请参阅 MDN）
这是一个例子：

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div {
  width: 23%;
  margin-bottom: 2%;
  background: gold;
  aspect-ratio: 1/1;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

使用 vw 单位

您可以使用 vw 单位使您的元素成为方形且响应式（MDN 上的视口单位）。
1vw = 视口宽度的 1%，因此您可以根据视口宽度设置元素的高度（或使用 vh 单位的高度).
4x4 网格示例：

body{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

div{
    width:23vw; height:23vw;
    margin:1vw 0;
    background:gold;  
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

使用 vh 单位根据视口高度调整元素大小可以实现相同的行为。

---

使用填充

填充是根据容器的宽度计算的，因此您可以使用它来设置块的高度取决于其宽度。
4x4 网格示例：

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}

<div class="wrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Answer 2

使用 CSS 将 div 变成正方形非常容易。您设置一个宽度，假设为 50%。然后添加相同值的 padding-bottom：

div {
width: 50%;
padding-bottom: 50%;
}

无论何时调整窗口大小，它都会保持方形。

。

。

您可以使用任何所需的边比来执行此操作，如果您希望框为 16:9，您可以计算：

9/16= 0.56

，然后乘以元素的宽度（在本例中为 50%(=0.5)） ，所以：

9/16*0.5= 0.28 = 28%

Answer 3

这是未经测试的，我不知道如何仅在 CSS 中执行此操作，我会使用 jQuery。

$('div').height($('div').width());

Answer 4

上述解决方案不保留面积 - 这个更好

        //@param {jQuery} div 
        function makeSquare(div){
            //make it square !
            var oldDimens = {
                h : div.height(),
                w : div.width()
            };
            var area = oldDimens.h * oldDimens.w;
            var l = Math.sqrt(area);
            div.height(l).width(l);
        }