響應式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>