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

问题描述

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

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

和

#map{ width: 100%;高度:200px }

我希望能够将高度更改为某种形式.就像在这个在我梦中的 CSS"中

#map { width: 100%;高度:宽度 * 1.72 }

我试过省略高度、设置为自动以及各种形式 - 但只是为了让 div 始终在我身上折叠.

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

如果不可能，那么让我摆脱困境的最佳方法是什么??(计时器、事件...等)

解决方案

为此，您将需要使用 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 {宽度:100%；高度:计算(100vw * 1.72)}

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>

and

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

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 }

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

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

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

解决方案

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

Or using CSS calc (see support here: http://caniuse.com/calc)

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

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