11

I need to zoom frame content only. Here in my web page I used zoom: 0.75; height: 520px; width: 800px;. If I increase the zoom value it means that the frame size will be increased.

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <STYLE>

#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</STYLE>
 </HEAD>

 <BODY>

  <IFRAME id="frame" src="http://www.google.com"></IFRAME> 

  </BODY>

</HTML>

In the above sample HTML page I want to zoom the content of the IFRAME without changing the size of that IFRAME.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Baskaran
  • 273
  • 1
  • 3
  • 13
  • possible duplicate of [How can I scale the content of an iframe?](http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe) – bummi Jul 14 '15 at 06:53

4 Answers4

15

I have used a script in my facebook and it's working in IE and Firefox

<style type="text/css">
#iframe {
    zoom: 0.15;
    -moz-transform:scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}
</style>

<iframe src="https://www.wikipedia.org/"  height="700" width="550">Wikipedia Encyclopedia</iframe>
Community
  • 1
  • 1
Ali Usman
  • 159
  • 1
  • 3
  • 5
    That's great - but **do not use** `zoom` **and** one of the vendor specific properties. Eg: if you use Chrome, your `iframe` gets zoomed AND transformed - what leads to a double-zooming. – Gerwald Feb 20 '14 at 12:30
  • 1
    This doesn't quite answer the question, does it? The OP clearly wants to scale the **contents** of the iframe, **not** the iframe itself. – rustyx Mar 04 '17 at 20:52
6

Not sure this works with linked documents, but with locally hosted content the following works:

<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME>
Luke Hankins
  • 588
  • 5
  • 13
3

For this you might need to use javascript.

There is a zoom plugin for jQuery here: http://css-tricks.com/examples/AnythingZoomer/

You could change the iframes src to a local web page (eg. frame.htm), place a div in the frame and use the jquery load() function to load the content into the frame:

<script type="text/javascript">
     $(document).ready(function() {
          $("#loadGoogle").load("pageToLoad.html", function(){ 
             //loaded
          });
    })
</script>
<div id="loadGoogle" style="width: 100%; height: 100%;"></div>

Then use the jquery zoom plugin inside the frame to zoom the content.

<script type="text/javascript">
    $("#loadGoogle").anythingZoomer({

       expansionSize: 30,
       speedMultiplier: 1.4

    });
</script>
Dan
  • 526
  • 9
  • 28
  • 1
    The problem is, you're telling the iframe to zoom, not the content of the iframe. By using the CSS "#frame { zoom: 0.75..." you won't get the desired result. – Dan Aug 26 '11 at 13:43
  • Hello. This does'nt work if the source is a PDF file, even if it is referenced on another HTML. – Raul Chiarella May 25 '22 at 17:11
0

For an updated answer this is a great guide. Cheers

http://www.collaboration133.com/how-to-scale-iframe-content-in-ie-chrome-firefox-and-safari/2717/

Edwin Dover
  • 49
  • 5