根据宽度设置div高度

Question

是否可以动态设置 divs 宽度，然后将其高度设置为该宽度的某个百分比。像这样的东西：

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

无论宽度是多少，我都想保留 div 的宽度与高度的比率。

Answer 1

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

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

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

Answer 2

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

田田你完了……

来源：纯CSS