html scale 缩放iframe,html - How can I scale the content of an iframe? - Stack Overflow

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: