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

Question

我在 twitterBootstrap 基本响应式设计网站中实现了 GoogleMapsV3 map 。

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

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

和

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

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

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

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

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

如果不可能，让我摆脱困境的最佳方式是什么？ (定时器、事件……等等)

Answer 1

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

fiddle

(实际上是 tinkerbin): http://tinkerbin.com/rQ71nWDT (廷克宾死了。)

解决方案。

注意 我在整个示例中都使用了 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%;
}