.attr{
width:50%;
}
You are here
css中如何规定某一元素高度等于其宽度
星期三, 2016-08-24 17:04 — adminshiping1
假设我定义某元素的宽度为父元素的50%，而父元素的宽度是可变化的，我想让该元素的高度等于其宽度，如果不用js，要如何实现？
4个回答
采纳
可以这样试试
<style type="text/css">
#container {
width: 80%;
height: 500px;
}
.attr {
width: 50%;
height: 0;
padding-bottom: 50%;
background-color: #008b57;
}
</style>
<div id='container'>
<div class='attr'></div>
</div>
我建议你去看一下CSS3的弹性盒 http://segmentfault.com/a/1190000000707526
之前理解错你的意思了，如果不用JS的话，并没有想到好的解决办法
建议还是用JS实现吧，一行代码就解决了
<script type="text/javascript">
$(document).ready(function(){
$('#box1').css('height',$('#box1').css('width'));
})
</script>
<style type="text/css">
#box{
width: 900px;
height: 400px;
border:1px solid red;
}
#box1{
width:50%;
border:1px solid green;
}
</style>
<body>
<div id='box'>
<div id='box1'></div>
</div>
</body>
可以用css3的calc
.attr{
width:50%;
height: calc(width);
}
不知道这样你觉得可以不
先了解和视口（viewport）有关css单位，vw,vh,vmax,vmin。
视口宽/高度是100vw/vh,视口被均分为100单位的vw/vh。
| 单位 | 说明 |
|---|---|
| vw | 相对于视窗的宽度 |
| vh | 相对于视窗的高度 |
| vmin | 相对于视口的宽度或高度中较小的那个被均分为100单位的vmin |
| vmax | 相对于视口的宽度或高度中较大的那个被均分为100单位的vmax |
例如用vmin设定其父元素的宽高：
{
width: 100vmin;
height: 100vmin;
}
再将子元素高设定为50%：
.attr {
width: 50%;
height: 50%;
background-color: orange;
}
普通分类: