响应iframe内容:缩放d3到iframe大小

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>