How Can I Scale Iframe Content to 80% of Its Original Size Using CSS?

Scaling Content in an iframe

To scale the content of an iframe to a desired size, you can utilize CSS transformations. In this case, the goal is to display the iframe with 80% of its original size.

Kip's solution, with slight modifications, can achieve this in browsers like Opera and Safari. The CSS should be adjusted as follows:

#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;
}

In this code, the "-ms-zoom" property is specific to Internet Explorer, while the other transform properties apply to other browsers. Setting the "scale" value to 0.75 effectively scales the iframe content down to 75% of its original size.

Additionally, you may want to set "overflow: hidden" on the "frame" element to suppress the appearance of scrollbars. This will ensure that the scaled content remains within the specified dimensions.

The above is the detailed content of How Can I Scale Iframe Content to 80% of Its Original Size Using CSS?. For more information, please follow other related articles on the PHP Chinese website!