div的高度=它的宽度,以百分比表示,因此div看起来像一个正方形,具有容器元素的非方形形状(仅限CSS)

Question

我已经将元素的宽度和高度设置为百分比,这样它们在大屏幕上看起来会更大,而在正常屏幕上看起来更正常.我也设置了min-height,min-width所以当在屏幕上观看太小时,布局不会失真.我希望我的一个元素显示为正方形,但我无法想出一个仅限CSS的解决方案.

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

这工作:http://jsfiddle.net/5VTTD/1/,但它使用JS.

Answer 1

你需要一个外部<div>的容器,然后一个内部的容器作为方形.

我使用了50%的方形尺寸,但你可以使用你想要的尺寸:它将相对于父<div>容器.

我还给它一个黑色的背景颜色来突出它:这里有一个演示.

诀窍在于padding-bottom: 100%父母<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>