CODEWITHSUNDEEP
javascriptjqueryhtml
Haroldo
Haroldo

Reputation: 37377

possible to shrink contents of iframe?

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

Upvotes: 28

Views: 66764

Answers (7)

lami
lami

Reputation: 1689

zoom is now available

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

Just add a zoom: 0.75 css property to your iframe.

Upvotes: 0

Elijah Rodriguez
Elijah Rodriguez

Reputation: 29

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>

Upvotes: 2

Tristan Brotherton
Tristan Brotherton

Reputation: 2561

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/

Upvotes: 9

Justin Emlay
Justin Emlay

Reputation: 905

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>

Upvotes: 63

futtta
futtta

Reputation: 5920

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.

Upvotes: 7

thecoshman
thecoshman

Reputation: 8650

Well, in short no.

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

Upvotes: 0

Seidr
Seidr

Reputation: 4936

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

Upvotes: -1

Related Questions