CODEWITHSUNDEEP
javascripthtmlcssiframe
jdigital
jdigital

Reputation: 12296

Automatically scale (resize) image in an iframe

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>

Upvotes: 10

Views: 29941

Answers (1)

rockmandew
rockmandew

Reputation: 860

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

Upvotes: 10

Related Questions