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

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

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

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

和

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

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

#map { width: 100%; height: width * 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 {
    width: 100%;
    height: calc(100vw * 1.72)
}

这里是。纯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%;
}

您可以尝试使用vw高度。 https://developer.mozilla.org/en/docs/Web/CSS/length

就像是

div#map {
     width: 100%;
     height: 60vw;
}

这会将div的宽度设置为视口宽度的60％。您可能需要使用calc进行调整以将填充考虑在内……

.video {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* ratio 16/9 */
}

.video iframe {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

16：9

底部填充= 9/16 * 100 = 56.25

尝试视口

您可以使用宽度数据并相应地计算高度

此示例适用于150x200像素的图片

width: calc(100vw / 2 - 30px);
height: calc((100vw/2 - 30px) * 1.34);

我需要做“流体”矩形而不是正方形....所以，对JOPL表示感谢....只花了一分钟....

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


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

您可以设置它before并after强制设置恒定的宽高比

HTML：

<div class="squared"></div>

CSS：

.squared {
  background: #333;
  width: 300px; 
}
.squared::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.squared::after {
  content: '';
  display: block;
  clear: both;
}

让我将JS解决方案描述为一个单独的答案：

function handleResize()
{
  var mapElement = document.getElementById("map");
  mapElement.style.height = (mapElement.offsetWidth * 1.72) + "px";
}

<div id="map" onresize="handleResize()">...</div>

（或动态注册事件监听器）。

mapElement.style.width * 1.72将不起作用，因为它要求使用widthDOM属性或内联样式的widthCSS属性在元素上显式设置宽度。

用jQuery解决方案

$(window).resize(function () {
    var width = $("#map").width();
    $("#map").height(width * 1.72);
});

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