CSS缩放高度以匹配宽度-可能具有形状因数

Question

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

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

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

和

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

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

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

我尝试过放弃高度，设置为自动，以及各种方式-但是只是使div总是让我崩溃。

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

如果不可能的话，什么是让我摆脱困境的最佳方式呢？（计时器，事件等）

Answer 1

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

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






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