CSS缩放高度以匹配宽度 - 可能与形状因子 [英] CSS scale height to match width - possibly with a formfactor

问题描述

我已在twitterBootstrap基本响应式设计网站中实施了GoogleMapsV3地图。

I have implemented a GoogleMapsV3 map in a twitterBootstrap basic responsive design site.

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

But my question is quite simple: i have:

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

和

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

能够将高度改变为形状因子。像这个在我的梦想CSS

I'd like to be able to change the height to a form factor. Like in this "in my dreams CSS"

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

我已经尝试了离开高度，设置为自动，以及各种各样的persentages我总是。

I have tried leaving out height, setting to auto, and all sorts of persentages - but only to make the div collapse on me always.

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

I have no problem writing a js-solution, but hope for a simple cleancut CSS solution, possible CSS3

如果不可能，什么是最好的方式js我出这个？ （计时器，事件...等）

If not possible, what would be the optimal way to js me out of this?? (timers, events...or the like)

提前感谢

解决方案：基于Gregs答案....（对于方形地图/ div）

SOLUTION: Based on Gregs answer....(for a square map/div)

window.addEventListener（resize，function（e）{
$（＃map ）.height（$（＃map）。width（））;
}）;

window.addEventListener("resize", function(e) { $("#map").height($("#map").width()); });

推荐答案

这将需要使用JavaScript，或依赖于有些支持的 calc（） CSS表达式。

For this, you will need to utilise JavaScript, or rely on the somewhat supported calc() CSS expression.

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(width * 1.75)
}

这篇关于CSS缩放高度以匹配宽度 - 可能与形状因子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！