0

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.

Kiel
  • 483
  • 3
  • 5
  • 18

2 Answers2

1

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Some kinda, but the the image should be fitted in the iframe it should not be scrolled to view the other parts of the image. – Kiel Feb 19 '16 at 11:09
  • @Kiel Updated, now it does. The ifame were set to 1280 but the iframe source was 1920, so I updated iframe to 1920 – Asons Feb 19 '16 at 11:16
  • Regarding css scale, is there a computation for this? because i will be dynamically setting the width and height of the wrapper. – Kiel Feb 19 '16 at 11:37
  • @Kiel Will you set width/height dynamically in the markup? – Asons Feb 19 '16 at 11:41
  • it will dynamically change once the user resizes the window. – Kiel Feb 19 '16 at 11:43
  • @Kiel If the wrapper's aspect ratio change, you need to re-compute the percent during the resize event and update the CSS rule – Asons Feb 19 '16 at 11:45
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/103951/discussion-between-kiel-and-lgson). – Kiel Feb 19 '16 at 11:47
0

This code makes your iframe responsible

answer

iframe, object, embed {
        max-width: 100%;
}
Community
  • 1
  • 1
silviagreen
  • 1,679
  • 1
  • 18
  • 39
  • 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. – Kiel Feb 19 '16 at 10:43