5

我已将元素的宽度和高度设置为百分比，以便它们在更大的屏幕上看起来更大一些，而在普通屏幕上看起来正常。我还设置了min-height，min-width以便在屏幕太小时查看时布局不会失真。我希望我的一个元素显示为正方形，但我无法想出一个纯 CSS 的解决方案来实现它。

这是我尝试过的：http://jsfiddle.net/5VTTD/，但它没有用。

这有效：http: //jsfiddle.net/5VTTD/1/，但它使用 JS。

4

2 回答 2

7

您将需要一个外部<div>容器作为容器，然后需要一个内部容器作为正方形。

我为正方形使用了 50% 的尺寸，但您可以使用您想要的尺寸：它将相对于父<div>容器。

我还给了它一个黑色的背景颜色来突出它：这里有一个DEMO。

诀窍在于padding-bottom: 100%parent <div>。

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>
于 2012-10-08T12:34:36.367 回答
0

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

于 2012-10-08T12:28:47.857 回答