Javascript 在iframe中自动缩放（调整）图像

在Firefox中，当将图像加载到iframe中时，图像将自动缩小以适应需要（如果图像太大）。（这是一项Firefox功能，可通过Firefox设置

浏览器禁用。启用\u自动\u图像\u大小调整

）

我想设置我的页面，使它们在使用其他浏览器（如Chrome和Internet Explorer）查看时具有相同的行为

下面是一个示例，请使用Chrome或IE查看它，并将其与Firefox进行比较：

代码如下：

<iframe frameborder='0' scrolling='no' src='http://ibin.co/2F6DxpSecv9h' height='600px' width='400px'>
</iframe>

---

好的，那么下面的代码笔应该是一个很好的起点：

我的时间不够，否则，我会完善缩放/大小

总之，正如您所看到的，我将iframe包装在一个div中：

<div class="wrap">
    This version works on FF 26, Chrome 32, Opera 18, and IE 9-11. 
    <iframe class="frame" src="http://ibin.co/2F6DxpSecv9h"></iframe>
</div>

就像我说的，它不是100%完成的，但是你应该能够调整数字来实现你想要的。如果您需要任何澄清或进一步信息，请告诉我

---

这是代码笔链接：

谢谢你的回答。我事先不知道图像的大小。这个解决方案能在这个限制下工作吗？让我修改一下答案——我今天应该有一些空闲时间。还有一个问题我在问这个问题时没有考虑过。这种方法将缩小帧内容，无论它是否是图像。是否可以将此行为仅限于图像？是^

.wrap {
    width: 400px;
    height: 600px;
    padding: 0;
    overflow: hidden;
}

.frame {
    width: 1200px;
    height: 1800px;
    border: 0;
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}