<分区>
如何用css使高度等于宽度。
我有这样的 HTML:
<div style="width:900px;height:200px;">
<a style="display:block; float:left; width:35%; background:green"></a>
</div>
现在，我想让 a 元素的高度等于宽度 (35%)。我怎样才能做到这一点？感谢您的帮助。
标签 javascript html
<分区>
如何用css使高度等于宽度。
我有这样的 HTML:
<div style="width:900px;height:200px;">
<a style="display:block; float:left; width:35%; background:green"></a>
</div>
现在，我想让 a 元素的高度等于宽度 (35%)。我怎样才能做到这一点？感谢您的帮助。
最佳答案
我知道了:
HTML:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
CSS:
.box{
background:#000;
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
JSFiddle: http://jsfiddle.net/wGszc/
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
您可以根据自己的需要调整它...
还有... 在谷歌中搜索一下也没什么坏处:https://www.google.com/search?q=make+height+iquals+to+width
关于javascript - 如何使用css使高度等于宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18946564/