Question

我正在尝试创建一个能够获得地图的响应式iframe，但是当我调整浏览器大小时，它会使用宽高比调整大小，我希望他能够继续填充整个空间。如下例所示：http://dev.fhmp.net/tailorfit/demo/，在溢出是裁剪的情况下。

今天它看起来像这样：

.iframe-rwd  {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.iframe-rwd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    <section id="container">
        {% include "main/header.html" %}
        {% include "main/sidebar.html" %}
        <section id="main-content">
            <section style="padding-right: 0px;padding-left: 0px;" class="wrapper">
                <div class="iframe-rwd">
                    <iframe
                            name="main-content"
                            src=""></iframe>
                </div>
            </section>
        </section>
    </section>

Answer 1

过去我只是将iframe宽度设置为100％，如果你在响应式容器中有iframe而不是总是占用那个宽度并保留你设置iframe的高度。

Answer 2

此解决方案来自Dave Rupert / Chris Coyier（我认为）。它需要一个包装div，但效果很好。

<强> HTML

<div class="iframe-rwd">
        <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </div>

<强> CSS

.iframe-rwd  {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

调整没有宽高比的iframe

2 个答案: