Search code examples
htmlcssiframescale

Transform scale with iframe

I have an iframe, I make it small using scale, the size of iframe is changed, but the body of the page is as big, as iframe was (vertical scrollbar). Am I doing something wrong?

.frame {
      width: 1777px;
      height: 2000px;
      transform: scale(0.05);
      transform-origin: 0 0;
    }
<html>
    <body>
        <iframe class="frame" src="https://wikipedia.com" frameborder="0"></iframe>
    </body>
</html>

Solution

  • If you put the iframe into a container - the container having the small dimensions - and position the iframe absolute then it seems to work OK (i.e. the iframe is kidded that it has the large viewport dimensions).

    .container {
  width: calc(1777px * 0.05);
  height: calc(2000px * 0.05);
  position: relative;
}

.frame {
  width: 1777px;
  height: 2000px;
  transform: scale(0.05);
  transform-origin: 0 0;
  position: absolute;
  left: 0;
  top: 0;
}
    <div class="container">
  <iframe class="frame" src="https://wikipedia.com" frameborder="0"></iframe>
</div>