W3docs
en
Log in

How to Scale the Content of <iframe> Element

Scaling the content of an <iframe> may be needed if you want to display an object in the area not matching its original size. Read and find possible solutions.

Tags

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

Below, we will show different approaches to adjusting an <iframe>'s dimensions: visual scaling with CSS, container resizing, and dynamic height adjustment with JavaScript. Note that visual scaling changes the appearance but not the logical dimensions or click targets, and cross-origin restrictions may apply.

Let’s start with HTML.

Create HTML

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

How to Scale the Content of <iframe> Element

<div id="wrap">
  <iframe id="scaled-frame" src="/tool/"></iframe>
</div>

Add CSS

How to Scale the Content of <iframe> Element

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

#scaled-frame {
  width: 1000px;
  height: 2000px;
  border: 0;
  zoom: 0.75;
  transform: scale(0.75);
  transform-origin: 0 0;
}

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: 0;
        zoom: 0.75;
        transform: scale(0.75);
        transform-origin: 0 0;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <iframe id="scaled-frame" src="/tool/"></iframe>
    </div>
  </body>
</html>
Try it Yourself »

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 the transform and transform-origin properties for modern browser compatibility.

Note: The zoom property is non-standard and may be deprecated in future specifications. Additionally, transform: scale() scales the iframe's viewport, which can break click targets and cause visual clipping.

Let’s see another example.

Example of resizing the iframe container 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>
Try it Yourself »

Here, we used an internal style sheet where the overflow property controls the content that doesn’t fit into an area, and the resize property allows manual adjustment of the container size. This approach resizes the wrapper rather than scaling the iframe's internal content.

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

Example of adjusting the iframe height 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 frame = document.getElementById("target");
      frame.onload = function() {
        frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px';
      }
    </script>
  </body>
</html>
Try it Yourself »

Note: This method dynamically resizes the iframe height rather than scaling content proportionally. Additionally, accessing contentWindow.document will fail for cross-origin iframes due to browser security restrictions (Same-Origin Policy).