possible to shrink contents of iframe?

Question

Is there a way to shrink what's inside an iframe without adjusting css?

any magical 'zoom' parameter out there?!!!

I have a 600px preview iframe i want to fit a 1000px site in without scrollbars...

Justin Emlay · Answer 1 · 2012-05-23T23:59:29.460

63

CSS3 can handle this. This bit of code should handle most all browsers or simply reduce it to fit your needs. No need to "adjust" any existing CSS:

iframe {
  -moz-transform: scale(0.25, 0.25); 
  -webkit-transform: scale(0.25, 0.25); 
  -o-transform: scale(0.25, 0.25);
  -ms-transform: scale(0.25, 0.25);
  transform: scale(0.25, 0.25); 
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}

Or if you want inline style for example just firefox:

<style>
  #IDNAME {
    -moz-transform: scale(0.25, 0.25); 
    -moz-transform-origin: top left;
  }
</style>

Then of course simply add the ID to your iframe:

<iframe id="IDNAME" src="http://www.whatever.com"></iframe>

edited May 23 '12 at 23:59

answered May 23 '12 at 06:27

Justin Emlay

904
9
10

Brilliant, and simple solution :) – Aaron Aug 22 '12 at 03:46
important note - this also changes the size of the whole iframe, so if you want to keep a defined size, you have to take care of it yourself. here is a good example using scroll width/height : http://futtta.be/squeezeFrame/ – ılǝ Nov 21 '12 at 02:54
1

That's easy enough, just put the iframe in a div and force the height/width that you want. That way as you shrink or expand you wont change the pages formatting. – Justin Emlay Dec 31 '12 at 20:05
Great solution! I've been looking for sth like that everywhere! If I have the iframe inside a div that has 100% height and width, is there a way that the content will scale accordingly when the div changes its size? – Angelos Makrygiorgos Jul 25 '15 at 00:30
1

a bit late in the day but this is an excellent solution - https://codepen.io/herschel666/post/scaling-iframes-css-transforms – SSED Nov 28 '17 at 22:14
This solution works, however it's worth noting that it can cause the content of the iframe (particularly text) to appear bury. – SuprMan Nov 02 '20 at 22:58
SuprMan - True, but that depends on the content. Naturally scaling fixed content will look odd. However if the source is scalable then it wont look blurry at all. So that's a problem with the source, not the solution. Fixed content is never a good thing in this day and age. – Justin Emlay Nov 03 '20 at 23:50
@SSED I know this is old, but you should post that as an answer as it is the only solution that won't blur the contents of the iframe. – luek baja Jul 15 '21 at 13:46

score 9 · Answer 2 · answered Dec 06 '13 at 23:37

9

You absolutely can do this, just fine.

Only caveat is you need to transform the iframe, and position it absolute:

iframe {
  /* Set the width of the iframe the size you want to transform it FROM */
  width: 1108px;
  height: 710px;
  /* apply the transform */
  -webkit-transform:scale(0.25);
  -moz-transform:scale(0.25);
  -o-transform:scale(0.25);
  transform:scale(0.25);
  /* position it, as if it was the original size */
  position: absolute;
  left: -400px;
  top: -200px;
}

To see an example look at: http://jsfiddle.net/8DVNa/

answered Dec 06 '13 at 23:37

Tristan Brotherton

2,533
7
32
38

1

If the same answer applies to two different questions, perhaps those questions are identical. You could have flagged the question as a duplicate instead of just answering it again. – Etienne de Martel Dec 10 '13 at 15:22
You should have gotten a lot more credit for this. It works great. – forrest Aug 26 '14 at 23:15

score 8 · Answer 3 · answered Apr 13 '10 at 14:45

If you control the Iframe-content, you might find this little hack of mine useful: http://futtta.be/squeezeFrame/

It's a cross-browser standalone javascript thingy that tries to automatically adjust the size of the page it's called from to the available size of the Iframe using css zoom and moz-transform.

score 2 · Answer 4 · edited Jun 14 '15 at 19:06

I have several shopping sites that I have ported to my new site and after fixing the view/vantage point of focus heres what I got... the site fit nicely inside my iframe per page... the font size difference is better than the focus issue... I guess it was a good trade off

    #wrap {  
        width: 115%;
        height: 2000px;
        padding: 0;
        overflow: hidden;
}
    #frame {  
        -ms-zoom: 0.5;
        -ms-transform-origin: 0 0;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0px 75px;
        -o-transform: scale(0.75);
        -o-transform-origin: 0px 75px;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
}
    #frame {
        width: 115%;
        height: 2000px;
        overflow: hidden;
}

    <div id="wrap">
        <iframe id="frame" src="http://hempseedoilsoap.com/" scrolling="auto" align="center"></iframe>
    </div>

Perfect! The only answer worked for me :) – innocent rock Apr 28 '21 at 19:52 — innocent rock, Apr 28 '21 at 19:52

score 0 · Answer 5 · answered Apr 13 '10 at 14:28

0

Well, in short no.

You can use in-line CSS to set the width/height to 600px and then also set the overflow:hidden

answered Apr 13 '10 at 14:28

thecoshman

8,394
8
55
77

Ah true - my assumption was that the poster wanted the WHOLE site visible. – Seidr Apr 13 '10 at 14:29
Well, I assumed the same thing really. Hopefully, he is not wanting to shrink the site down to fit into the smaller preview. That you can't do... less you do some server side rendering of a page, saving output, shrinking etc etc etc – thecoshman Apr 13 '10 at 14:33
well, you can shrink the site to fit in the iframe, clientside, cfr. my answer below :) – futtta Apr 14 '10 at 16:08

score -1 · Accepted Answer · answered Apr 13 '10 at 14:28

-1

I'm afraid not. Your only option would be to use site-specific CSS modifiers to reduce font and element size.

answered Apr 13 '10 at 14:28

Seidr

4,946
3
27
39

7

There are several answers below that show that it can be done. – forrest Aug 26 '14 at 23:17
Talk about raising the dead..If the user who asked this question wants to change their accepted answer, they can do so. I don't deny that since providing my 'answer' there have been other true answers developed. Seeing as the gap between my 'answer' being provided, and a true answer being provided is over two years, I think you can forgive both my answer, and the lack of update on the question of the OP. – Seidr Aug 27 '14 at 05:11
No offense. I am simply trying to find a working solution. This is not an easy topic and there is little helpful information. – forrest Aug 27 '14 at 18:41
3

I believe it is possible to delete your answer, which would make sense if it's no longer valid. – Autumn Leonard Jan 06 '17 at 15:12

possible to shrink contents of iframe?

6 Answers6

Linked

Related