当宽度根据百分比动态变化时，制作一个 <div> 正方形 [重复]

Posted 2023-03-05

【中文标题】当宽度根据百分比动态变化时，制作一个 <div> 正方形 [重复]

【英文标题】：Make a <div> square when there is a dynamically changing width based on percentage [duplicate]

【发布时间】：2011-02-08 13:49:06

【问题描述】：

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

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

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

【问题讨论】：

真正的问题不在于正方形的大小：那只是（高度/n）。问题是将网格的总高度设置为与其宽度相同。这很棘手，既不做一些固定大小的假设，也不使用某种形式的脚本。

【参考方案1】：

有 2 种主要技术可以使用 padding 和 vw 单位来保持响应式元素的纵横比：（对于响应式正方形网格的完整解决方案，您可以see this answer） em>

使用大众单位

您可以使用vw 单位使您的元素呈方形和响应式 (viewport units on 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>

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

【讨论】：

这很好，只要你意识到 vw 和 vh 是相对于视口的大小，而不是任何给定的容器（不幸的是）

@frumbert 我使用基于容器宽度的解决方案（“填充技术”）编辑了我的答案

这是一个很棒的 hack！程序员的胜利！

【参考方案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%

【讨论】：

我正在寻找一种纯 css 的方式来做到这一点，谢谢！

不要在 Edge 中工作。 :/ jsfiddle.net/836popre/3

美丽的解决方案，需要答案。

仅供参考，我使用此解决方案来维持动态完美圆，但我需要明确设置 height: 0 才能使其正常工作。

不幸的是，当设置 max-width 时，这似乎会中断，即max-width: 200px;;

【参考方案3】：

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

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

【讨论】：

当时我并不了解 JQuery，但是一旦我学会了，这就很容易了。谢谢！

如果页面被调整大小，这将失败。

【参考方案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);
        

【讨论】：

我不认为保护区是相关的。 OP 不希望如何根据元素的宽度制作正方形。改变这个宽度有点违背目的。 -1