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

Answer 1

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/

Answer 2

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

Answer 3

Well, in short no.

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

Answer 4

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.

Answer 5

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>

Answer 6

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>