Question

我有一个iframe必须占用60％的宽度值，但高度可以是任何值。有什么方法可以“缩放”iframe的内容以使其适合，然后我可以将高度设置为此缩放级别的高度？我不知道这是可能的，但我只能在这里找到涉及改变内容周围iframe大小的结果。所以任何建议都表示赞赏！

由于

Answer 1

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。

如何根据iframe的大小重新调整iframe的内容？

1 个答案: