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

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

javascript html css iframe

Javascript 如何根据iframe的大小重新调整iframe内容的大小？,javascript,html,css,iframe,Javascript,Html,Css,Iframe,我有一个iframe，它必须占据60%的宽度值，但高度可以是任何东西。是否有任何方法可以“缩放”iframe的内容，使其适合，然后将高度设置为此缩放级别的高度？我不知道这是可能的，但我只能在这里找到涉及改变内容周围iframe大小的结果。因此，任何建议都将不胜感激谢谢css中有一个缩放属性，这里有一些示例您可以通过将新窗口大小与设计的大小进行比较并以此方式进行缩放来确定缩放比例。如果使用jQuery，您可以检测iFrame窗口的resize事件中的更改（我认为）一个肮脏的例子是：页面1.

我有一个iframe，它必须占据60%的宽度值，但高度可以是任何东西。是否有任何方法可以“缩放”iframe的内容，使其适合，然后将高度设置为此缩放级别的高度？我不知道这是可能的，但我只能在这里找到涉及改变内容周围iframe大小的结果。因此，任何建议都将不胜感激

谢谢

css中有一个缩放属性，这里有一些示例

您可以通过将新窗口大小与设计的大小进行比较并以此方式进行缩放来确定缩放比例。如果使用jQuery，您可以检测iFrame窗口的resize事件中的更改（我认为）

一个肮脏的例子是：

页面1.html

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

页面2.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>


$（窗口）。调整大小（函数（）{
调整大小（）；
});
$（文档）.ready（函数（）{
调整大小（）；
});
var设计宽度=300；
函数resize（）{
var w=$（window.width（）；
var zoom=parseInt（w/designWidth*100）.toString（）+“%”；
$（“#内容”）.css（“缩放”，缩放）；
}
我变得越来越大越来越小！

这在最新版本的Chrome中适用

<!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>