Question

我正在开发一个基于用户选择N生成NxN网格的Web应用程序。我希望网格的总宽度是相对的（即可用空间的100％），以便用户可以打印各种纸张尺寸。

我可以很容易地计算出网格中方块的宽度（即：100％/ N），但是我在计算高度时遇到了问题。网页的高度总是无限的，除非我人为地限制它，就像我说的那样，我不想做。

当我的网格的高度和宽度限制是动态的而不是正方形时，如何使网格中的正方形为正方形与矩形相比？

Answer 1

有两种主要技术可以保持响应元素的宽高比，使用填充和vw单位：
（对于广告响应网格的完整解决方案，您可以see this answer）

使用大众单位

您可以使用vw单位使元素成为正方形和响应式（viewport units on MDN） 1vw = 1% of viewport width因此您可以根据视口的宽度设置元素的高度使用4x4网格的示例：

＆＃13;

body{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

div{
    width:23vw; height:23vw;
    margin:1vw 0;
    background:gold;  
}

＆＃13;

<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>

＆＃13;

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

使用填充

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

Answer 3

使用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％

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

当基于百分比</div>的动态变化宽度时，使<div>平方

4 个答案:

使用大众单位

使用填充