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

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

发布于
2015-03-28

✓ 已被采纳

可以这样试试

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>

颜海镜

5.9k2529

发布于
2015-04-04

更新于
2015-04-04

可以用css3的calc

.attr{
  width:50%;
  height: calc(width);
}

SwimInSky

68492228

发布于
2015-03-28

更新于
2015-03-28

我建议你去看一下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>

xuzhouqwerdf

2

发布于
2020-06-30

新手上路，请多包涵

width:50vw;
height:50vw;

七月羽歌

2913

发布于
2017-02-22

既然想用css实现，就没去考虑用js了。最开始，多希望height: calc(width);能够实现。但是，想法没好，现实残酷。这个方法不行。于是，找呀炸呀的。在这里找到了答案。将height设置为0，padding-bottom设置为宽度的百分比就可以了。不明白咋回事，但就是实现了。棒棒哒。不过，除了这种方式，还有另外一种方式。给div加一个before伪元素。然后加入这些样式： div:before{content:""; display:inlin-block; padding-bottom:100%;}就实现了。详情请看知乎这里。实现div的高度随宽度改变而改变，并高度等于宽度

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

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现前端视频流的处理和优化？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

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

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现 前端视频流的处理 和优化？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

如何实现前端视频流的处理和优化？