如何根據iframe的大小重新調整iframe的內容大小？

我有一個iframe，必須佔用60％的寬度值，但高度可以是任何東西。有什麼辦法可以「縮放」iframe的內容，以便它適合與，然後我可以將高度設置爲此縮放級別的高度？我不知道這是可能的，但我只能在這裏找到結果，包括改變內容的iframe的大小。所以，任何建議表示讚賞！如何根據iframe的大小重新調整iframe的內容大小？

感謝

來源

2013-12-19 Zach

有在CSS變焦性能，與這裏的例子What Does 'zoom' do in CSS?

您可以通過新的窗口大小與您設計的尺寸和縮放這樣確定的變焦倍數。如果您使用jQuery，則可以檢測iFrame窗口的resize事件（我認爲）的更改。

// Assuming you've designed your page for a 1024px width 
var designWidth = 1024; 
$(window).resize(function() { 
    var w = $(window).width(); 
    /* calculate new zoom */ 
    var zoom = parseInt(w/designWidth * 100).toString() + "%"; 

    // Assuming all your content to resize is in an element with id "content" 
    $("#content").css("zoom", zoom); 
});

髒的例子是這樣的：

page1.html

<!DOCTYPE html> 
<html> 
<body> 
<iframe width="50%" src="page2.html"></iframe> 
</body> 
</html>

page2.html

<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$(window).resize(function() { 
    resize(); 
}); 

$(document).ready(function(){ 
    resize(); 
}); 

var designWidth = 300; 

function resize() { 
    var w = $(window).width(); 
    var zoom = parseInt(w/designWidth * 100).toString() + "%"; 
    $("#content").css("zoom", zoom); 
} 
</script> 
<div id="content">I get bigger and smaller!</div> 
</body> 
</html>

這在Chrome的最新版本爲我工作。

來源

2013-12-19 01:25:41 Sav

This works great !!!謝謝！ – Zach

如何根據iframe的大小重新調整iframe的內容大小？

回答

相關問題