How can I scale the content of an iframe (in my example it is an HTML page, and is not a popup) in a page of my web site?
For example, I want to display the content
If your html is styled with css, you can probably link different style sheets for different sizes.
As said, I doubt you can do it.
Maybe you can scale at least the text itself, by setting a style font-size: 80%;
.
Untested, not sure it works, and won't resize boxes or images.
For those of you having trouble getting this to work in IE, it is helpful to use -ms-zoom
as suggested below and use the zoom function on the #wrap
div, not the iframe
id. In my experience, with the zoom
function trying to scale the iframe div of #frame
, it would scale the iframe size and not the content within it (which is what you're going for).
Looks like this. Works for me on IE8, Chrome and FF.
#wrap {
overflow: hidden;
position: relative;
width:800px;
height:850px;
-ms-zoom: 0.75;
}
Kip's solution should work on Opera and Safari if you change the CSS to:
<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
-ms-zoom: 0.75;
-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>
You might also want to specify overflow: hidden on #frame to prevent scrollbars.
After struggling with this for hours trying to get it to work in IE8, 9, and 10 here's what worked for me.
This stripped-down CSS works in FF 26, Chrome 32, Opera 18, and IE9 -11 as of 1/7/2014:
.wrap
{
width: 320px;
height: 192px;
padding: 0;
overflow: hidden;
}
.frame
{
width: 1280px;
height: 786px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
For IE8, set the width/height to match the iframe, and add -ms-zoom to the .wrap container div:
.wrap
{
width: 1280px; /* same size as frame */
height: 768px;
-ms-zoom: 0.25; /* for IE 8 ONLY */
}
Just use your favorite method for browser sniffing to conditionally include the appropriate CSS, see Is there a way to do browser specific conditional CSS inside a *.css file? for some ideas.
IE7 was a lost cause since -ms-zoom did not exist until IE8.
Here's the actual HTML I tested with:
<div class="wrap">
<iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
<iframe class="frame" src="http://apple.com"></iframe>
</div>
http://jsfiddle.net/esassaman/PnWFY/
html{zoom:0.4;} ?-)