我在 twitterBootstrap 基本响应式设计网站中实现了 GoogleMapsV3 地图。
但我的问题很简单：我有：
<div id="map"></map>
和
#map{ width: 100%; height: 200px }
我希望能够将高度更改为外形尺寸。就像在这个“我梦中的 CSS”中
#map { width: 100%; height: width * 1.72 }
我尝试过忽略高度、设置为自动以及各种类型的参数 - 但只是为了让 div 总是在我身上塌陷。
我写一个 js 解决方案没有问题，但希望有一个简单干净的 CSS 解决方案，可能是 CSS3
如果不可能，那么让我摆脱这种情况的最佳方法是什么？ （计时器、事件……或类似的）
【问题讨论】：
标签： html css responsive-design
来了。纯 CSS。您确实需要一个额外的“容器”元素。
小提琴
（实际上是 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%;
}
【讨论】：
padding-bottom（在本例中为 50%）而不是 100% 的其他实例
#map_container 的宽度为100% 的情况。如果您将#map_container 的宽度设置为固定宽度，例如250px 你会看到高度仍然等于父元素的宽度。
您可以尝试使用vw 作为高度。
https://developer.mozilla.org/en/docs/Web/CSS/length
类似
div#map {
width: 100%;
height: 60vw;
}
这会将 div 的宽度设置为视口宽度的 60%。您可能需要使用 calc 进行调整以将填充考虑在内……
【讨论】：
height: 60% 尝试* 将高度设置为 父元素高度 的 60%，而 height: 60vw 将高度设置为 视口宽度，所以它们是完全不同的。 （*仅当父级具有设定的高度时才有效，而不是让它保持在它需要的高度以包含它的子级，这通常是您想要做的）
为此，您将需要使用 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)
}
【讨论】：
height: calc(width * 1.75) 无论如何都无效
mapElement.style.height = Math.floor(mapElement.offsetWidth * 1.72) + 'px';
175vw 还不够吗？！
calc(height * 2) 或 calc(width * 2) 有效
.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 不起作用，因为它要求在元素上显式设置宽度，使用width DOM 属性或内联样式的width CSS 属性。
【讨论】：
用 Jquery 解决
$(window).resize(function () {
var width = $("#map").width();
$("#map").height(width * 1.72);
});
【讨论】：
我用 YouTube 的 IFRAME 做了类似的事情，其中 iframe 位于始终根据纵向/横向更改的网格内，因此此代码适用于：
所以这个问题的代码是：
// Layout resize
let height = window.innerHeight;
let width = window.document.getElementById('player').parentNode.clientWidth;
height = width / 1.77;
<div id="player"></div>
... etc ..
function onYouTubeIframeAPIReady() {
// Layout resize
let height = window.innerHeight;
let width = window.document.getElementById('player').parentNode.clientWidth;
height = width / 1.77;
player = new YT.Player('player', {
width: '100%',
height: height,
videoId: currentVideoId,
playerVars: {
'autoplay': 0,
'loop': 0,
'mute': 0,
'controls': 0,
'enablejsapi': 1,
'playsinline': 0,
'rel': 0,
'widget_referrer': 'http://my domain ...'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onError
}
});
}
【讨论】：
#map {
width: 100%;
height: 100vw * 1.72
}
【讨论】：