Css 如何将一个div设计成一个反应灵敏的正方形？

我希望我的div调整其高度，使其始终等于宽度。宽度为百分比。当父对象的宽度减小时，长方体应通过保持其纵横比来减小

---

CSS是如何做到这一点的？

适用于几乎所有浏览器

您可以尝试将底部填充作为百分比

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

内容在这里

外部div是一个正方形，内部div包含内容。这个解决方案对我有效很多次

---

这里有一个

要实现您想要的目标，您可以使用

vw

下面是我举的一个简单的例子

HTML:

<div class="square">
    <h1>This is a Square</h1>
</div>

.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}
.square h1 {
    color: #fff;
}

---

我相信还有很多其他的方法可以做到这一点，但这种方法对我来说似乎是最好的。

这就是我想到的。这是

首先，对于正方形和居中文本，我需要三个包装器元素

<div><div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</div></div></div>

---

这很简单，只需指定一个填充底部，其大小与宽度的百分比相同。因此，如果宽度为50%，请使用下面的示例

id or class{
    width: 50%;
    padding-bottom: 50%;
}

这是一个jsfiddle

---

带有响应文本的编辑版本：

另一种方法是在

div

中使用宽度为100%，

高度为自动的透明1x1.png，并绝对定位其中的内容：

html:

菲德尔：
HTML

<div class='square-box'>
    <div class='square-content'>
        <h3>test</h3>
    </div>
</div>

纯css中的方形元素具有挑战性和局限性，但是。另一个有用的参考可能是。对于正方形元素的响应网格，你可以检查以下答案：任何屏幕上的完美正方形：这是一篇很好的文章，有很好的解释。。。这是可行的，但我不懂技术。你能解释一下为什么这个方法会起作用吗？如果你想使用填充底部的方法，这是一个很好的教程。[链接]本教程非常好，我很容易理解这项技术。比所选答案更可取，因为它在容器的约束下工作，而不是很少使用的视口useful@C.Lee您必须添加
位置：绝对div
上的code>使其工作。计算父标注时，将忽略具有绝对定位的图元。这意味着您可以向内部元素添加内容，但也可以添加填充、边框等。：）看，这绝对是最干净的解决方案。我发现，对于那些对浏览器支持感兴趣的人来说，这很不错，但浏览器支持目前有点粗略，不是吗？这种解决方案在网格系统中不起作用。如果你看到的是以列宽扩展的正方形，@rahulbehl的答案会更好。浏览器支持
vw
：提示：如果你想在纵向或横向视图的视口中放置一个正方形：```@media（orientation:patrait）{宽度：100vw；高度：100vw；}@media（orientation:landscape）{宽度：100vh；高度：100vh；}“``简单正方形的额外元素，是的，但我想是可行的。旁注<代码>显示：IE7或更早版本中不支持表格单元格

。但是，一旦向其添加内容，这将超出方形纵横比。您可以通过

溢出：隐藏

或容器中子元素的其他绝对位置来解决此问题。与@gidzior的回答完全一样，这是一种纯粹的魔法，但它确实有效！谢谢这是什么黑魔法？！当宽度可能受到“最大宽度”规则的限制时，此解决方案非常有效。在这些情况下，实际计算的宽度可能小于以百分比为单位设置的宽度，而直接在最外层元素上设置填充的所有其他解决方案都将失败。这是有效的，因为元素的填充是相对于其父元素的宽度计算的。我一直在寻找答案，以保持divs，同时使用flex box调整大小，这是唯一一个工作完美的。纯粹的魔法，谢谢！这是一种更有用的方法，因为您可以使用实际的大小和高度-对于方形分区内的元素非常有用。提示不错，但使用

<div>
    <img src="1x1px.png">
    <h1>FOO</h1>
</div>

div {
    position: relative;
    width: 50%;
}

img {
    width: 100%;
    height: auto;
}

h1 {
    position: absolute;
    top: 10px;
    left: 10px;
}

<div class='square-box'>
    <div class='square-content'>
        <h3>test</h3>
    </div>
</div>

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
}