Question

我使用这个围绕iframe的CSS代码来使它们具有响应性。

.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地图，但当地图缩小到一定尺寸时，它会消失并被灰色框取代。检查显示谷歌出于某种原因在该尺寸上设置'display：none'。这个问题有解决方案吗？

请参阅此测试场景：http://jsfiddle.net/kuLT6/

Answer 1

我是绝对的初学者所以请记住。有同样的问题，并将填充底部更改为80％，它的工作原理。问题几乎肯定与控制等所需的最小空间有关。

只有80％尝试过，因为它对我有用。也可以在较小的％下工作。

Answer 2

如@ dr-mobile所述，它看起来像一个功能。

我在Mac（小牛队）的Firefox 26中遇到了同样的问题。

我可以通过使用更高的宽高比来避免灰色背景（例如16:9）。

似乎额外的高度允许Google的代码感觉它有足够的空间来显示所有的UI位。

这是我的SCSS：

.mm {

    height: 0;
    padding-bottom: 56.25%; // 16:9 = (9 / 16 = .5625) x 100
    position: relative;
    overflow: hidden;
    margin: 10px 0;

    iframe,
    object,
    embed,
    video {
        border: 0;
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
    }

    &.tv { padding-bottom: 75%; } // 4:3 = (3 / 4 = .75) x 100

    &.slide { padding-bottom: 66.666%; } // 3:2 = (2 / 3 = .66666666666667) x 100

}

HTML（使用新版Google地图嵌入代码）：

<div class="mm tv"><iframe width="300" height="260" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d17819.243465772353!2d-122.4777661!3d37.8179015!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808586deffffffc3%3A0xcded139783705509!2sGolden+Gate+Bridge!5e1!3m2!1sen!2sus!4v1391366234135" frameborder="0" style="border:0"></iframe></div>

请注意，我使用的是4:3宽高比。

我只在我的Mac上测试了Chrome和Firefox，但看起来好像有额外的高度使得地图可以以较小的尺寸查看。

新的嵌入式Google地图在小尺寸时变灰

2 个答案: