How to Scale the Content of an Iframe

Transform scale with iframe

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>

scaling down the view of the content inside an iframe

I would suggest your add the css-rule transform: scale(0.5); to your iframe or the content you want to resize. The example scales your content to 50% size.

possible to shrink contents of iframe?

I'm afraid not. Your only option would be to use site-specific CSS modifiers to reduce font and element size.

Resize external website content to fit iFrame width

What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.

E.g.

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

Scale content of fullscreen iframe

I found a solution by compensating for the loss from scale in the height and width:

If scale is 75% just set height & width to 133.34%.