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

9
在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>
1个回答

9

好的,以下代码应该是一个很好的起点:

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

我时间比较紧,否则我会完善缩放/大小调整。

无论如何,你可以看到,我将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>

然后,您将div设置为所需的宽度和高度 - 一旦您完成此操作,您将iframe设置为“Transform:scale”,这将缩小iframe,因此您需要将宽度和高度设置为比例的倍数。例如,您将宽度和高度设置为400像素乘以600像素 - 因为图像正在缩放(.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%完成的,但你应该能够调整数字以达到你想要的效果。如果需要任何澄清或进一步信息,请告诉我。

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


谢谢您的回答。我不知道图像的大小。这个解决方案能否在这种限制下工作? - jdigital
1
让我修改答案 - 今天我应该有一些空闲时间。 - rockmandew
我在提问时没有考虑到另一个问题。这种方法会缩小框架内容,无论它是不是图像。有可能将此行为限制在仅适用于图像吗? - jdigital
是的,它是可能的。 - rockmandew

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接