在iframe中自动缩放(调整大小)图像

Automatically scale (resize) image in an iframe

本文关键字：调整 图像 缩放 iframe      更新时间：2023-09-26

在Firefox中，当将图像加载到iframe中时，图像将自动缩小以适应(如果它太大)。(这是Firefox的一个功能，可以通过Firefox设置browser.enable_automatic_image_resizing禁用。)

我想设置我的网页，使他们有相同的行为时，与其他浏览器，如Chrome和Internet Explorer。

这里有一个例子，用Chrome或IE看一下，并与Firefox比较:http://codepen.io/anon/pen/KddKQX

代码如下:

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

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

http://codepen.io/anon/pen/OyRgmw

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

无论如何，正如你所看到的，我用div:

包装了iframe。
<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>

然后将div设置为所需的宽度和高度-一旦你有了这个，你将iframe设置为"Transform: scale"，这将缩小iframe，这就是为什么你需要将width和height设置为scale的倍数。例如，你将宽度和高度设置为400px * 600px -因为图像是缩放的(0.25)，你需要将框架尺寸乘以4 -下面的CSS将达到预期的效果:

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

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

这里又是codependency链接:http://codepen.io/anon/pen/OyRgmw

相关文章：