Html 做一个<；部门>；当存在基于百分比的动态变化宽度时，为正方形

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

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

---

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

这是未经测试的，我不知道如何仅在CSS中做到这一点，我会使用jQuery

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

---

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

        //@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);
        }

---

有两种主要技术可以保持响应元件的纵横比，即使用填充和vw单元：
（对于响应方格网的完整解决方案，您可以）

使用大众单位 您可以使用

vw

units使您的元素呈方形且具有响应性（）。

1vw=视口宽度的1%

，因此您可以根据视口的宽度设置元素的高度（或使用

vh

单位设置高度）。
4x4网格的示例：

正文{
保证金：0；
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
}
div{
宽度：23vw；高度：23vw；
利润率：1vw 0；
背景：金；
}

---

使用CSS很容易将div变成正方形。你设定了一个宽度，比如说50%。然后添加具有相同值的填充底部：

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

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

如果希望长方体为16:9，则可以使用所需的任意边长比进行计算：

9/16=0.56

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

---

9/16*0.5=0.28=28%

真正的问题不在于正方形的大小：那只是（高度/n）。问题是将栅格的总高度设置为与其宽度相同。这很棘手，既不做一些固定大小的假设，也不使用某种形式的脚本。我当时不知道JQuery，但一旦我学会了，这就足够简单了。谢谢如果调整页面大小，这将失败。我不认为保留区域是相关的。OP想知道如何根据元素的宽度来制作正方形。改变这个宽度有点违背目的-1只要你意识到vw和vh与视口的大小有关，而不是任何给定的容器（不幸的是）@frumbert我用基于容器宽度的解决方案（“填充技术”）编辑了我的答案，这是一个很棒的技巧！为了胜利！！我正在寻找一个纯css的方式来做到这一点，谢谢！不要在边缘工作。：/美丽的解决方案，必须是答案。仅供参考，我使用此解决方案来保持一个动态的完美圆，但我需要显式设置

高度：0

，它才能工作。不幸的是，当设置了最大宽度时，这似乎会中断，即

最大宽度：200px；