How can I scale the content of an iframe?

Step-by-step guide to scaling iframe content

Scaling with CSS transforms

Using transform in your CSS, you can adjust your iframe's dimensions, keeping its layout intact. Set the width and height proportionate to the scale factor:

iframe {
  width: 200%;   /* WebGL Experience */
  height: 200%; /* Remastered Edition */
  transform: scale(0.5);  /* "Honey, I Shrunk the Website!" Edition */
  transform-origin: top left; /* Because we respect left-handed users */
}


Ensuring cross-browser compatibility

Your code has to perform on any stage, including different browsers. Add these prefixes for a standing ovation:

iframe {
  -moz-transform: scale(0.5); /* 'cuz we love our Firefox fans */
  -o-transform: scale(0.5); /* 'cuz Opera still has followers */
  -webkit-transform: scale(0.5); /* 'cuz Chrome and Safari users matter */
  transform: scale(0.5); /* 'cuz standards are cool */
  transform-origin: top left;
  width: 200%;
  height: 200%;
}


Scaling in Internet Explorer

For Internet Explorer fans, use the zoom CSS property:

iframe {
  zoom: 0.5; /* "Zooming into the past" Edition */
}


Avoiding scrollbars

Scaling can bring unwanted scrollbars. Toss them with overflow: hidden:

iframe {
  overflow: hidden;  /* "NoOverflow.com" */
}


Get a better grip, with a div

Wrapping iframes into a div can add more styling control:

<div class="iframe-container">
  <!-- Scaling applied to the container, not the sacred iframe -->
  <iframe src="page.html"></iframe>
</div>


Style the container for better control:

.iframe-container {
  overflow: hidden;  /* Tminator 2: Judgment Scroll */
  transform: scale(0.75);  /* Karoake-night size */
  transform-origin: top left;  /* 'cuz left is the new right */
  width: 133.33%; /* Because perfectly round numbers are so mainstream */
  height: 133.33%; /* Just to add a bit of mystery */
}


Looking good on all screens

Make sure your scaling keeps the content's layout and functionality in shape across various screen sizes. "Looks Good on All Devices" is the new RGB.

Fine-tuning your transformations

Adjust transform-origin to suit your preferences.

iframe {
  transform-origin: 0 0; /* Top left corner, 'cuz that's where we start reading */
}


Styling - inline or stylesheet?

Use inline styles for testing, and external stylesheets for a cleaner production-level code:

/* For fancier code, in an external stylesheet */
.iframe-container > iframe {
  transform: scale(0.75);
}


Staying updated

Finally, always stay briefed on the updates to Kip's solutions and keep an eye on the documentation for the latest in web standards and browser versions.