Embedded iFrame (Scaling)

#iFrames#Snippets

How to effectively transform and scale `iframe` elements in HTML to achieve a clean layout without unwanted scrollbars.

/*
Source - https://stackoverflow.com/a/71834211
Posted by A Haworth
Retrieved 2026-03-18, License - CC BY-SA 4.0
*/
<style>
.container-iscaled {
  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;
}
</style>

<div class="container-iscaled">
  <iframe class="frame" src="https://wikipedia.com" frameborder="0"></iframe>
</div>