Question

我正在尝试将一些简单的d3放入iframe中。我希望iframe的内容随屏幕大小而缩放。

我正在尝试使此方法有效：http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/。

相应的jsfiddle在这里：http://jsfiddle.net/812y03ot/3/。

HTML

<div class="video-container">
   <iframe src="http://mbostock.github.io/d3/talk/20111116/airports.html"
   frameborder="no" scrolling="no"></iframe>
</div>

CSS

.video-container {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

当我减小窗口大小时，iframe的内容不会缩放。

我不希望iframe本身的内容响应缩小的窗口大小。我只是希望它在窗口大小减小时缩小。

我在这里缺少什么？

Answer 1

尝试适应这一点。 http://jsfiddle.net/oxvkdcfy/

    <style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

响应式iframe内容：将d3缩放为iframe大小

1 个答案: