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

Question

在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>

Answer 1

Okay so the following code pen should be a good jumping off point:

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

I am running short on time, otherwise, I would perfect the scaling/sizing.

Anyways, as you can see, I wrapped the iframe in a 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>

Then you set the div to the desired width and height - once you have this, you set your iframe to "Transform: scale" which will shrink the iframe, which is why you need to set the Width and Height to a multiple of the Scale. For example, you set the Width and the Height to 400px by 600px - since the image is being scaled(.25), you are going to want to multiply your frame dimensions by 4 - the following CSS will achieve the desired effect:

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

So like I said, it isn't 100% complete but you should be able to tweak the numbers to achieve what you want. Let me know if you need any clarification or further information.

Here is the codepen link again: http://codepen.io/anon/pen/OyRgmw