5

我已将元素的宽度和高度设置为百分比,以便它们在更大的屏幕上看起来更大一些,而在普通屏幕上看起来正常。我还设置了min-heightmin-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 回答