Automatically scale (resize) image in an iframe

Question

In Firefox, when loading an image into an iframe, the image will automatically be scaled down to fit (if it's too big). (This is a Firefox feature that can be disabled via the Firefox setting browser.enable_automatic_image_resizing.)

I'd like to set up my pages so that they have the same behavior when viewed with other browsers such as Chrome and Internet Explorer.

Here's an example, take a look at it with Chrome or IE and compare it with Firefox: http://codepen.io/anon/pen/KddKQX

Here's the code:

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

Solution

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

Comments

[jdigital]

Thanks for your answer. I don't know the size of the image beforehand. Can this solution be made to work with that restriction?

[rockmandew]

Let me modify the answer - I should have some spare time today.

[jdigital]

One other issue that I hadn't considered when I asked the question. This approach will shrink the frame contents whether or not it's an image. Is it possible to restrict this behavior to just images?

[rockmandew]

Yes ^ it is possible