Question

我正在使用缩放/缩放来调整iframe的大小：

{
-ms-zoom: 0.80;
-moz-transform: scale(0.80);
-o-transform: scale(0.80);
-webkit-transform: scale(0.80);
-o-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}

这适用于我想要的，但是在宽度调整大小的情况下，它会留下100％保持为-20％的边距。我理论上可以检测父节点的宽度，然后在调整大小后使用jQuery进行设置，或者可以缩放内页，但是我希望有人可以给我一个更优雅的解决方案，它涉及到使用jquery造型？

http://jsfiddle.net/ablueman/8uvz0fzf/

[编辑] 类似问题：Scrolling when using css scale

Answer 1

所以继续我做了什么来提交一个工作版本，我会将它链接到一个滑块，这样你就可以放大和缩小（使用var bob）或者可以使用响应式iframe使其动态但是我到目前为止所拥有的：

<script>
function mainiframe(){
var bob = "0.90";
$('iframe#mainiframe, iframe#injectIframe').contents().find('body').css({
            "margin" : 0,
      "zoom": bob,
            "-moz-transform": "scale(" + bob + ")",
            "-webkit-transform": "scale(" + bob + ")",
            "-o-transform": "scale(" + bob + ")",
            "-o-transform-origin": "0 0",
            "-moz-transform-origin": "0 0",
            "-webkit-transform-origin": "0 0"
    });
};
</script>

然后在文件的正文中。

<button onclick="mainiframe()">Click me</button>

显然这不会跨域工作，正如你所看到的，我实际上一次缩小了2个iframe。如果我可以使用某种比例将其链接到响应式iframe，我可以使用缩放制作响应式iframe，但问题很复杂。

由于JSfiddles页面设置不起作用，但是：http://jsfiddle.net/ablueman/w4e8zu52/

[编辑]带滑块的新小屋：http://jsfiddle.net/ablueman/8uvz0fzf/ 它只影响：

“错误404我们真的很抱歉，但没有这样的页面。”

但显示有效，显然这对于正常的iframe页面来说不会有问题。

Answer 2

作为via css，它只能影响iframe本身，而不是iframe内容（例如iframe body），你不能用css来做。话虽这么说，您可以通过javascript访问iframe的内容。使用jQuery，它将类似于：

$('iframe').contents().find(body).css('zoom', yourvalue);

iframe缩放宽度问题

2 个答案: