根据宽度设置 div 高度

Question

是否可以动态设置 div 的宽度，然后将其高度设置为该宽度的特定百分比。像这样：

#myDiv{
    width:%100;
    height: {35% of width};
}

我想保留 div 的宽高比，不管宽度是多少。

Answer 1

尝试简单的 JavaScript:

document.getElementById("elemID").style.height = 
Math.round((document.getElementById("elemID").style.width * 100) / 35) + "px";

这将得到百分比（四舍五入），并将其分配给高度。

Answer 2

您可以使用 CSS 将高度设置为零，然后向 padding-bottom 添加一个百分比。您可能需要稍微调整一下以获得所需的结果，但这里有一个 fiddle 示例 http://jsfiddle.net/wbq8o3s7/

#myDiv {
  width: 100%;
  height: 0;
  padding-bottom: 35%;
  background-color: #333;
}

<div id="myDiv"></div>

Answer 3

HTML:

<div class='box'> 
    <div class='content'>All your content are belong to us</div> 
</div>

我们使用两个块元素来实现所需的行为，宽度为框，高度为内容。

CSS:

.box{
    position: relative;
    width: 50%;     /* desired width */
}
.box:before{
    content: "";
    display: block;
    padding-top: 100%;  /*What you want the height to be in relation to the width*/
}

内容：
然后将内容设置为完全覆盖整个盒子，这样无论大小，它都适合！

.content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Tada 你完成了...

来源：Pure CSS

根据宽度设置 div 高度

Setting div height based on its width

html

css