CSS 缩放高度以匹配宽度 - 可能具有外形尺寸

Question

我在 twitterBootstrap 基本响应式设计站点中实现了 GoogleMapsV3 地图。

但我的问题很简单：我有：

 <div id="map"></map>

和

#map{ width: 100%; height: 200px }

我希望能够将高度更改为外形尺寸。就像这个“在我的梦想中的 CSS”

 #map { width: 100%; height: width * 1.72 }

我试过忽略高度，设置为自动，以及各种百分比 - 但只是让 div 总是在我身上崩溃。

我写一个 js 解决方案没问题，但希望有一个简单的 cleancut CSS 解决方案，可能是 CSS3

如果不可能，让我摆脱困境的最佳方法是什么？ （计时器，事件……或类似的）

原文由 Steen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为此，您将需要使用 JavaScript，或依赖某种程度受支持的 calc() CSS 表达式。

 window.addEventListener("resize", function(e) {
    var mapElement = document.getElementById("map");
    mapElement.style.height = mapElement.offsetWidth * 1.72;
});

或者使用 CSS calc（参见此处的支持：http: //caniuse.com/calc ）

 #map {
    width: 100%;
    height: calc(100vw * 1.72)
}

原文由 Greg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这里是。纯 CSS。您确实需要一个额外的“容器”元素。

小提琴

（实际上是 tinkerbin）： http ://tinkerbin.com/rQ71nWDT（Tinkerbin 已死。）

解决方案。

请注意 ，我在整个示例中使用的是 100%。您可以使用任何您喜欢的百分比。

由于高度百分比是相对于父元素的高度，我们不能依赖它。我们必须依靠别的东西。幸运的是，填充是相对于宽度的——无论是水平填充还是垂直填充。在 padding-xyz: 100% 中，100% 等于框宽度的 100%。

不幸的是，填充就是填充。内容框的高度为 0。没问题！

粘贴一个绝对定位的元素，给它 100% 的宽度，100% 的高度并将它用作你的实际内容框。 100% 高度有效是因为绝对定位元素的百分比高度是相对于它们相对定位的框的填充框而言的。

HTML:

 <div id="map_container">
  <div id="map">
  </div>
</div>

CSS：

 #map_container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#map {
  position: absolute;
  width: 100%;
  height: 100%;
}

原文由 João Paulo Macedo 发布，翻译遵循 CC BY-SA 3.0 许可协议