是否可以将宽度设置为相同的高度(比率1:1)?
例
+----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+
CSS
div { width: 80%; height: same-as-width }
使用jQuery,您可以通过以下方式实现此目的
var cw = $('.child').width(); $('.child').css({'height':cw+'px'});
有一种使用CSS的方法!
如果你根据父容器设置宽度,则可以将高度设置为0,并将padding-bottom设置为将根据当前宽度计算的百分比:
.some_element { position: relative; width: 20%; height: 0; padding-bottom: 20%; }
这在所有主流浏览器中都可以正常运行。
HTML:
<div id="container"> <div id="dummy"></div> <div id="element"> some text </div> </div>
CSS:
#container { display: inline-block; position: relative; width: 50%; } #dummy { margin-top: 75%; /* 4:3 aspect ratio */ } #element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: silver /* show me! */ }