如何缩放 iframe 内容（使用所见即所得编辑器嵌入）？答案

【问题标题】：How to scale iframe content (embedded using a WYSIWYG editor)?如何缩放 iframe 内容（使用所见即所得编辑器嵌入）？
【发布时间】：2013-01-04 16:04:30
【问题描述】：

我有这个 iframe 代码：

<iframe frameborder="0" height="549" scrolling="auto" src="http://change4life.artscience.co.uk/" width="520"></iframe>

使用 Drupal - 我需要将此 iframe 嵌入到 520 宽的页面模板中（使用 WYSIWYG 编辑器）。我知道如何更改宽度和高度，但这样做实际上并不能缩放 iframe 中内容的大小。此内容位于单独的服务器上，这意味着我无法更改原始内容 - 是否有任何代码可以扩展内容？请记住，我仅限于内联 CSS/HTML，因为我在 CMS 中的页面模板上的 WYSIWYG 编辑器中工作。

希望除了zoom 之外还有其他东西，因为它似乎只在 IE 中有效。

【问题讨论】：

标签： javascript css iframe wysiwyg inline-code

【解决方案1】：

您可以尝试使用 CSS 2D 变换缩放 iframe：https://developer.mozilla.org/en-US/docs/CSS/transform。像这样：

iframe {
    transform: scale(0.5);
}

我还没有测试过，但这是我能想到的唯一可行的方法......

【讨论】：

不会缩小 50% 吗？他希望它内联，所以他应该添加style="transform:scale(1.5)"
我需要它更小。我想我可能已经从网站上的其他帖子中弄清楚了 style="-ms-zoom: 0.68; -moz-transform: scale(0.68); -moz-transform-origin: 0 0; -o-transform: scale(0.75); -o-transform-origin: 0 0; -webkit-transform: scale(0.68); -webkit-transform-origin: 0 0;"
那段代码在 Firefox、Chrome 和 IE9 中有效，但在 IE8 或 IE7 中似乎无效。