Question

I have a webpage in HTML and related CSS and JS, I am also available with an iFrame whose width is lesser than the webpage, Now I want to display this webpage in the iFrame in a way that nothing gets distorted, in short I want to configure the webpage to get fixed in smaller iFrame as well..

Guide me to make this work…

Answer 1

It is dodgy, for obvious reasons, but you can do this with CSS transform. Load the iframe in the correct size for the content, then scale the iframe down with transform. Say your content is 1000×1000 and your desired iframe is 500×500.

Load the content in a frame that fits:

<iframe id="magic" src="whatever" width="1000" height="1000"></iframe>

Then scale it to half the size with CSS:

#magic {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}