根据宽度设置div的高度

Question

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

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

我希望无论div的宽度是多少，都能保持其宽高比。

- user906357

Answer 1

您可以通过CSS将高度设置为零，然后在padding-bottom中添加百分比来实现此操作。您可能需要微调一下以获得所需的结果，但这里有一个带有示例的演示：

http://jsfiddle.net/wbq8o3s7/

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

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

- Jake Taylor

---

亲爱的华生，语义很简单 :) 填充实际上成为 div 的高度，随着屏幕尺寸的变化，填充也会改变。 - Jake Taylor

嗯，我还是不明白。35%到底是基于什么计算的？通常高度相关的百分比应该是基于高度计算的吧？为什么这里要基于宽度计算呢？ - Steve Bennett

上/下填充或边距的百分比值是相对于包含块的宽度而言的。 - Jake Taylor

Answer 2

HTML：

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

我们使用两个块级元素来实现所需的行为，box用于宽度，content用于高度。

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

- Keeghan McGarry

---

我的答案也是纯CSS的，并且在你之前发布的，所以不确定你为什么说“或者”。 - Jake Taylor

非常抱歉，当我开始输入时，您的答案还没有出现，我在点击按钮之前没有进行检查。我现在会更改那个“或”的。 - Keeghan McGarry

Answer 3

尝试一个简单的JavaScript：

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

这将获取宽度的百分比（四舍五入），并将其赋值给高度。

- DripDrop

---

你需要这个斜线“/”来做除法（我总是忘记哪个是哪个 =))。 - hellatan

谢谢。我在平板电脑上有点困惑 :) - DripDrop