CODEWITHSUNDEEP
csshtmliframe
Kiel
Kiel

Reputation: 493

Fit an Absolute positioned html to an iframe

How do I fit an absolute positioned html to an iframe? I need this to make it responsive to the browser. I know that it should be created using media queries but it was created using absolute positioning by using some online html tools.

So my plan is using an iframe that would resize based on the browsers width and height. Then the content inside would be scaled depending on the iframe's size.

I already tried this one 

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

But it didn't worked.

The html inside the iframe has a size of 1920x1080. The iframe has a size of 1600x900. I need to fit the 1920x1080 inside that 1600x900 so i need to scale it down.

Upvotes: 0

Views: 302

Answers (2)

Asons
Asons

Reputation: 87191

The iframe width/height needs to match its source widht/height settings if you don't want the scroll bar to appear, so I changed it to 1950px/1110 (some margin included).

It the scroll bar still appears (content is bigger than iframe), you would normally use overflow: hidden, though it is not yet fully cross browser, but adding scrolling=no to the iframe markup is.

.wrap { width: 480px; height: 270px; padding: 0; overflow: hidden; }
.frame {
  -ms-zoom: 0.25;
  -moz-transform: scale(0.25);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.25);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.25);
  -webkit-transform-origin: 0 0;
}
.frame.nr1 { width: 1950px; height: 1110px; border: 1px solid black; }
.frame.nr2 { width: 1920px; height: 1080px; border: 1px solid black; }
<p>iframe with wider/higher settings</p>
<div class="wrap">
  <iframe class="frame nr1" src="https://www.htechcorp.net/sandbox/sample.html"></iframe>
</div>
<p>iframe using `scrolling=no`</p>
<div class="wrap">
  <iframe scrolling=no class="frame nr2" src="https://www.htechcorp.net/sandbox/sample.html"></iframe>
</div>

Upvotes: 1

silviagreen
silviagreen

Reputation: 1729

This code makes your iframe responsible

answer

iframe, object, embed {
        max-width: 100%;
}

Upvotes: 0

Related Questions