Question

在 TrueBlueAussie的解决方案中，iframe会根据DIV的宽度和高度按比例缩放。这是我喜欢的修改版本： JSFiddle

＆＃xA;＆＃xA;

所以我的问题是，如何根据iframe的宽度和高度自动按比例缩放iframe中的内容（使用解决方案调整后）？当我指的是内容时，我指的是其中的所有内容，例如图像，文本等。

＆＃xA;＆＃xA;

经过研究，我偶然发现了一个可以解决我的问题的属性，但之后使用它与解决方案，它没有任何影响。

＆＃xA;＆＃xA;

样式/ CSS属性：

＆＃xA;＆＃xA; < pre>

 -ms-zoom：0.75;＆＃xA; -moz-transform：scale（0.75）;＆＃xA; -moz-transform-origin：0 0;＆＃xA; -o-transform：scale （0.75）;＆＃xA; -o-transform-origin：0 0;＆＃xA; -webkit-transform：scale（0.75）;＆＃xA; -webkit-transform-origin：0 0;＆＃xA;

＆＃xA;＆＃xA;

在我看来，效果仅在宽度和高度保持不变时才采取行动。我正在尝试实现属性中使用的缩放效果，因此我不会动态干扰内部的内容。

＆＃xA;＆＃xA;

我是否必须使用JavaScript来实现此目的？我已经坚持了这个问题大约一个星期，似乎无法找到解决方案。

＆＃xA;＆＃xA;

我理解同源政策，在iframe中使用外部网站时。我对加载外部来源的内容不感兴趣。

＆＃xA;

Answer 1

一个非常简单的解决方案是将度量设置为百分比。如果你不能这样工作，我认为transform是你最好的解决方案。您的resize函数已经完成了部分计算，您需要添加variable来获取width的初始iframe，而不是通过设置调整大小新的width和height，您可以使用newWidth变量来设置比例因子，并在tranform css中使用它。像这样：

在iframe添加到DOM后立即设置初始宽度变量：

    var iframe = document.getElementById('frame'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;
    iframedoc.body.innerHTML = source, iframeinitialwidth = $('iframe').width();

在调整大小时，你使用newWidth来计算你应该使用的比例，并使用transform调整大小（我只使用-webkit，但它应该适用于导航器支持转换）：

    ...
    //$iframe.width(newWidth);
    //$iframe.height(newHeight);
    });
    var scaleFactor = newWidth/iframeinitialwidth
    $('iframe').css({'-webkit-transform': 'scale('+scaleFactor+')', '-webkit-transform-origin': '0 0'})
   ...

http://jsfiddle.net/368sjapg/2/

根据<iframe>

1 个答案: