当基于百分比的动态变化宽度时,使<div>正方形

Question

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

我可以很容易地计算网格中方块的宽度%(即:100%/ N),但是我在计算高度时遇到了问题.网页的高度总是无限的,除非我人为地限制它,就像我说的那样,我不想做.

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

Answer 1

有两种主要技术可以保持响应元素的宽高比,使用填充和vw单位:(
对于响应方格网格的完整解决方案,你可以看到这个答案)

使用大众单位

您可以使用vw单位使元素成为方形和响应(MDN上的视口单元).
1vw = 1% of viewport width因此,您可以根据视口的宽度设置元素的高度.
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中这样做,我会使用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%