Html 当宽度根据百分比动态变化时，制作一个 <div> 正方形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2648733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a <div> square when there is a dynamically changing width based on percentage
提问by Nate
I am working on a web app that will generate an NxN grid based on the user's selection of N. I want the total width of the grid to be relative (ie 100% of the available space) so that users can print on various paper sizes.
我正在开发一个 web 应用程序，它将根据用户对 N 的选择生成一个 NxN 网格。我希望网格的总宽度是相对的（即可用空间的 100%），以便用户可以在各种纸张尺寸上打印.
I can easily calculate the width of the squares in the grid by % (ie: 100%/N), but I am having issues calculating the height. The height of a web page is always going to be infinite unless I artificially limit it which, like I said, I don't want to do.
我可以轻松地按 %（即：100%/N）计算网格中正方形的宽度，但我在计算高度时遇到问题。网页的高度总是无限的，除非我人为地限制它，就像我说的，我不想这样做。
How can I make the squares in my grid be squareversus rectangular when the height and width constraints of my grid are dynamic and not square?
当我的网格的高度和宽度约束是动态的而不是正方形时，如何使我的网格中的正方形是正方形而不是矩形？
采纳答案by Christopher Altman
This is un-tested, I do not know of how to do this in CSS only, I would use jQuery.
这是未经测试的，我不知道如何仅在 CSS 中执行此操作，我会使用 jQuery。
$('div').height($('div').width());
回答by web-tiki
There are 2 main techniques to keep the aspect ratio of a responsive element, using padding and vw units :
(for a complete solution for a responsive grid of squares, you can see this answer)
有两种主要技术可以使用填充和 vw 单位保持响应元素的纵横比：（
对于响应式正方形网格的完整解决方案，您可以查看此答案）
Using vw units
使用大众单位
You can use vwunits to make your elements square and responsive (viewport units on MDN).1vw = 1% of viewport widthso you can set the height of the elements according to the width of the viewport(or height with vhunits).
Example with a 4x4 grid :
您可以使用vw单位使您的元素方形和响应（MDN 上的视口单位）。1vw = 1% of viewport width因此您可以根据视口的宽度（或带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>The same behaviour can be achieved sizing the element accoring to the viewport height usin vhunits.
可以实现相同的行为，根据使用vh单位的视口高度调整元素大小。
Using padding
使用填充
Padding is calculated according to the containers width so you can use it to set the height of block according to it's width.
Example with a 4x4 grid :
填充是根据容器宽度计算的，因此您可以使用它根据其宽度设置块的高度。
使用 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>回答by LeeCanvas
To make a div a square is pretty easy with CSS. You set a width, let's say 50%. Then you add a padding-bottom of the same value:
使用 CSS 可以很容易地将 div 变成正方形。你设置了一个宽度，比方说 50%。然后你添加一个相同值的填充底部：
div {
width: 50%;
padding-bottom: 50%;
}
and it will stay square whenever you resize the window.
每当您调整窗口大小时，它都会保持方形。
.
.
.
.
You can do this with any side ratio you want, if you want the box to be 16:9 you calculate:
你可以用任何你想要的边比来做这个，如果你想让盒子是 16:9，你可以计算：
9/16= 0.56
9/16=0.56
which you then multiply by the width of your element (in this case 50%(=0.5)), so:
然后乘以元素的宽度（在本例中为 50%（=0.5）），因此：
9/16*0.5= 0.28 = 28%
9/16*0.5= 0.28 = 28%
回答by HymanMahoney
The above solution doesn't preserve area - this one is better
上述解决方案不保留区域 - 这个更好
//@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);
}
