css - 新的嵌入式谷歌地图在小尺寸时变灰

Question

我使用这个 CSS 代码包裹 iframe 来使它们响应。

.responsive-iframe-container {
        position: relative;
        padding-bottom: 56.25%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
}

.responsive-iframe-container iframe,   
.responsive-iframe-container object,  
.responsive-iframe-container embed {
 position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;

}

这仍然适用于新的 Google map ，但是本地图缩小到一定尺寸时，它会消失并被灰色框取代。检查它表明谷歌出于某种原因将“display:none”设置为该尺寸。这个问题有解决方案吗？

请看这个测试场景:http://jsfiddle.net/kuLT6/

Answer 1

我是一个绝对的初学者所以请记住。有同样的问题，将 padding-bottom 更改为 80%，它起作用了。问题几乎肯定与控件等所需的最小空间有关。

只尝试了 80%，因为它对我有用。也可以在更小的百分比下工作。