CSS缩放高度以匹配宽度 - 可能与formfactor匹配

Question

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

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

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

和

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

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

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

我试图将高度,设置为自动以及各种各样的因素留下来 - 但只是为了让div永远崩溃.

我编写js-solution没有问题,但希望有一个简单的清理CSS解决方案,可能是CSS3

如果不可能,那将是什么最好的方式来解决这个问题？(计时器,事件......等)

Answer 1

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

Answer 2

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

就像是

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

这会将div的宽度设置为视口宽度的60%.您可能需要使用calc来调整以考虑填充...

Answer 3

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

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

16：9

padding-bottom = 9/16 * 100 = 56.25

Answer 4

为此,您需要使用JavaScript,或者依赖于某种支持的calc()CSS表达式.

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

或者使用CSS计算(请参阅此处的支持:http://caniuse.com/calc)

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

Answer 5

尝试视口

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

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

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

Answer 6

您可以使用像这样的 CSS 将图像裁剪为一定的比例，然后使用object-fit将图像居中。

CSS：

.ratio-crop {
   aspect-ratio: 1.72 / 1; //using the example size in the question
   object-fit: cover;
}

HTML：

<img src="/images.jpg" class="ratio-crop">

Answer 7

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

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


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