开发者

possible to shrink contents of iframe?

Is there a way to shrink what's inside an iframe 开发者_C百科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...


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>


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/


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.


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>


Well, in short no.

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


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜