我已将元素的宽度和高度设置为百分比,以便它们在更大的屏幕上看起来更大一些,而在普通屏幕上看起来正常。我还设置了min-height
,min-width
以便在屏幕太小时查看时布局不会失真。我希望我的一个元素显示为正方形,但我无法想出一个纯 CSS 的解决方案来实现它。
这是我尝试过的:http://jsfiddle.net/5VTTD/,但它没有用。
这有效:http: //jsfiddle.net/5VTTD/1/,但它使用 JS。
我已将元素的宽度和高度设置为百分比,以便它们在更大的屏幕上看起来更大一些,而在普通屏幕上看起来正常。我还设置了min-height
,min-width
以便在屏幕太小时查看时布局不会失真。我希望我的一个元素显示为正方形,但我无法想出一个纯 CSS 的解决方案来实现它。
这是我尝试过的:http://jsfiddle.net/5VTTD/,但它没有用。
这有效:http: //jsfiddle.net/5VTTD/1/,但它使用 JS。
您将需要一个外部<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>
看看这个:http: //jsfiddle.net/5VTTD/9/