无涯教程网

CSSzoom 高度以匹配宽度可能与外形尺寸

发布于06月28日

我已经在twitterBootstrap Basic响应式设计站点实现了一个GoogleMapsV3 map .

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

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

和

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

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

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

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

我可以编写一个js-解决方案，但是希望有一个简单的清晰的css解决方案，可能是css3.

如果不可能，最好的办法是什么才能把我从这件事中解脱出来呢？(计时器、事件等)

推荐答案

为此，您需要使用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(100vw * 1.72)
}

Css相关问答推荐

如何提高数学输出的质量？

如何使搜索框扩展并溢出其他内容

CSS媒体查询不显示所需的输出

在css网格中用一个锚标签(顶部/底部边距)包装图像？

如何防止css边框缩小div？

如何根据屏幕宽度覆盖SCSS变量？

我找不出Firefox上奇怪的css行为的原因

带高度的容器查询不工作，但可随宽度调整

为什么 KaTeX 的彩虹文本只能在 Firefox 上运行？

如何让 v-col 变成可滚动的？

如何使用：has() 父 Select 器 Select 父元素的子元素，在父元素和子元素之间没有中间层的情况下？

为什么左浮动上的清除：左也会影响右浮动，以及如何避免它

如何使用props 为 Vue 中的组件创建动态背景图像？

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小？

Flexbox 子高度它的内容

无法使用 Bootstrap 3 更改占位符 colored颜色

Div Size 自动调整内容大小

单选按钮和标签显示在同一行

数据协议 URL 大小限制

在 CSS3 中重新启动动画：比删除元素更好的方法吗？

实用课程推荐

相关教程推荐