css中如何规定某一元素高度等于其宽度

假设我定义某元素的宽度为父元素的50%，而父元素的宽度是可变化的，我想让该元素的高度等于其宽度，如果不用js，要如何实现？

.attr{
  width:50%;
}

我建议你去看一下CSS3的弹性盒 http://.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>

可以这样试试

html<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的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;
}

【热门文章】