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

概述我已经将元素的宽度和高度设置为百分比,这样它们在大屏幕上看起来会更大,而在正常屏幕上看起来更正常.我还设置了最小高度和最小宽度,以便在屏幕上观看太小时不会扭曲布局.我希望我的一个元素显示为正方形,但我无法想出一个仅限CSS的解决方案. 这是我尝试过的：http://jsfiddle.net/5VTTD/,但它没有用. 这工作：http://jsfiddle.net/5VTTD/1/,但它使用JS. 我已经将元素的宽度和高度设置为百分比,这样它们在大屏幕上看起来会更大,而在正常屏幕上看起来更正常.我还设置了最小高度和最小宽度,以便在屏幕上观看太小时不会扭曲布局.我希望我的一个元素显示为正方形,但我无法想出一个仅限CSS的解决方案.

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

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

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

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

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

诀窍在于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>

总结

以上是内存溢出为你收集整理的html – div的高度=它的宽度,以百分比表示,因此div看起来像一个正方形,具有容器元素的非方形形状(仅限CSS)全部内容，希望文章能够帮你解决html – div的高度=它的宽度,以百分比表示,因此div看起来像一个正方形,具有容器元素的非方形形状(仅限CSS)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。