根据 <iframe> 的宽度和高度自动缩放内容

Question

在TrueBlueAussie's Solution, an iframe becomes proportionally scaled based on the DIVs width and height. Here's his modified version that I prefer: JSFiddle

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

经过研究，我偶然发现了一个可能会解决我的问题的属性，但是在将它与解决方案一起使用后，它没有任何效果。

Style/CSS 属性：

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

在我看来，效果只有在宽度和高度保持不变时才会起作用。我正在尝试实现属性中使用的缩放效果，所以我不会动态干扰里面的内容。

我必须使用 JavaScript 才能实现吗？我被这个问题困扰了大约一个星期，似乎找不到解决方案。

在 iframe 中使用外部网站时，我确实理解 Same-origin policy。我对从外部来源加载内容不感兴趣。

Answer 1

一个非常简单的解决方案是将度量设置为百分比。如果你不能这样工作，我认为 transform 是你最好的解决方案。您的 resize 函数已经完成了部分计算，您需要添加的是 variable 以获得 iframe 的初始 width，然后而不是通过设置调整大小一个新的 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 来计算您应该使用的比例并使用变换调整大小（我只使用 -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> 的宽度和高度自动缩放内容

Auto-scale contents based on width and height of an <iframe>

javascript

html

css

iframe

aspect-ratio