div元素的高度等于其宽度的百分比，以使该div看起来像一个正方形，即使容器元素不是正方形（仅使用CSS实现）。

Question

我已经将元素的宽度和高度设置为百分比，这样它们在大屏幕上看起来会更大，在普通屏幕上则更正常。我还设置了min-height和min-width，以确保当在太小的屏幕上查看时布局不会失真。我希望其中一个元素呈现为正方形，但我无法想出仅使用CSS的解决方案。这是我的尝试：http://jsfiddle.net/5VTTD/，但它没有起作用。这个可以：http://jsfiddle.net/5VTTD/1/，但它需要JS。

- Peeyush Kushwaha

---

你必须为容器设置明确的高度，或者容器内部的盒子从容器的内容中获取其高度，而不是容器本身。由于你的容器不是正方形且没有明确的高度或宽度，因此js解决方案是正确的。 - Rick Calder

Answer 1

你需要一个外部<div>作为容器，然后再用一个内部的正方形。
我使用了50%的尺寸来制作正方形，但你可以使用任何你想要的尺寸：它将相对于父级<div>容器。
我还给它设置了黑色背景色以突出它：这里有一个演示。
关键在于父级<div>的padding-bottom: 100%。
CSS:

#container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#square {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #000000;
}

HTML:

<div id="container">
  <div id="square">
  </div>
</div>

- Cirou

---

但是如果容器元素本身不是正方形，则会失败：http://jsfiddle.net/wwvcH/3/ - Peeyush Kushwaha

它失败了，因为它基于父容器的尺寸。 - Cirou

将500和1500作为父容器的最小尺寸应用，使其呈现为矩形。 - Cirou

如果div是正方形，这是一个非常棒的解决方案。它是100%响应式的，并且与Bootstrap和过渡效果完美地配合。考虑到问题特别涉及到正方形，这是一个很好的答案。 - Code Whisperer

Answer 2

看一下这个：http://jsfiddle.net/5VTTD/9/

- simoncereska