Transform scale with iframe-CodePudding

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  src="https://wikipedia.com" frameborder="0"></iframe>
    </body>
</html>

CodePudding user response：

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 >
  <iframe  src="https://wikipedia.com" frameborder="0"></iframe>
</div>

CodePudding user response：

.frame {
    width: 100%;
    height: 100%;
}