How to Scale the Content of <iframe> Element

The HTML <iframe> element creates an inline frame for embedding a third-party content. Scaling the content of an <iframe> element may be needed if you want to display an object in the area not matching its original size.

Below, we are going to show how to scale the content of an <iframe> step by step.

Let’s start with HTML.

Create HTML

  • Create a <div> element with an id "wrap".
  • Place an <iframe> element with an id "scaled-frame" inside the <div>.
  • Add the src attribute with the content you want to display.
<div id="wrap">
  <iframe id="scaled-frame" src="/tool/"></iframe>
</div>

Add CSS

#wrap {
  width: 750px;
  height: 1500px;
  padding: 0;
  overflow: hidden;
}

#scaled-frame {
  width: 1000px;
  height: 2000px;
  border: 0px;
}

#scaled-frame {
  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;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #scaled-frame {
    zoom: 1;
  }
}

Here is the result of our code.

Example of scaling the content of the <iframe> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #wrap {
        width: 750px;
        height: 1500px;
        padding: 0;
        overflow: hidden;
      }
      #scaled-frame {
        width: 1000px;
        height: 2000px;
        border: 0px;
      }
      #scaled-frame {
        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;
      }
      @media screen and (-webkit-min-device-pixel-ratio:0) {
        #scaled-frame {
          zoom: 1;
        }
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <iframe id="scaled-frame" src="/tool/"></iframe>
    </div>
  </body>
</html>

In the example mentioned above, we scaled the <iframe> that is 1000px wide down to 750px. If you want to scale the content to 75%, 1000px x 2000px will become 750px x 1500px. We also used prefixes with the transform and transform-origin properties for maximum browser compatibility.

Also note that if the @media screen and (-webkit-min-device-pixel-ratio:0) is not defined, the <iframe> will be scaled twice in Chrome.

Let’s see another example.

Example of scaling the content of the <iframe> element using internal CSS: 
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #target {
        width: 400px;
        height: 300px;
        overflow-y: auto;
        overflow-x: auto;
        resize: both;
        position: relative;
        z-index: 2;
      }
      iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <div id="target">
      <iframe src="/quiz/"></iframe>
    </div>
  </body>
</html>

Here, we used an internal style sheet where the overflow property controls the content that doesn’t fit into an area.

In our last example, JavaScript is used. We use the contentWindow property to adjust the height of the <iframe> according to the contents. Note that scrollbars do not appear.

Example of scaling the content of the <iframe> element using JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ffffff;
      }
      div {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <iframe src="/snippets/css.html" id="target"></iframe>
    <script>
      var div = document.getElementById("target");
      div.onload = function() {
        div.style.height = div.contentWindow.document.body.scrollHeight + 'px';
      }
    </script>
  </body>
</html>