欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

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

4个回答

0
采纳

可以这样试试

<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>



0

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

不知道这样你觉得可以不


先了解和视口(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;
}
来自 https://segmentfault.com/q/1010000002629233


用jquery先获取元素的宽度, 再把这个值赋给元素的高度,下面代码没调试,自己试试
如:

var widthNum=$("#id").width();

$("#id").height(widthNum);//直接设置元素的高
$("#id").css("height", widthNum);//通过设置CSS属性来设置元素的高
 
追问
这样会导致页面重新渲染很严重
追答
如果说不写死的话,那就只能这样
 

便游360 

采纳率:69% 擅长: 暂未定制

其他回答

高度也设置成同等的百分比
啊也ABC  | 2015-10-03 16:16
评论 
0 0
那宽度就得是已知的了,跟数学一样,没有已知怎么得未知
 
追问
现在的问题就是这个宽度是相对的。CSS里不可能所有的值都已知
追答
那你把高度也设置成和宽度一样的百分数试试
来自 http://zhidao.baidu.com/link?url=lpCq9m9KuG-SBUZkKheHQt2X9G5dR7gYk_IwiU3k3vWfIrMJQfY8Bz--lazwhvrmkaL...
普通分类: