使绝对定位的 html 适合 iframe

Question

如何使绝对定位的 html 适合 iframe？我需要它来使其响应浏览器。我知道它应该使用媒体查询创建，但它是通过使用一些在线 html 工具使用绝对定位创建的。

所以我的计划是使用一个 iframe，它会根据浏览器的宽度和高度调整大小。然后里面的内容会根据 iframe 的大小进行缩放。

这个我已经试过了

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

但是没有用。

iframe 中的 html 大小为 1920x1080。 iframe 的大小为 1600x900。我需要将 1920x1080 放入 1600x900 中，所以我需要缩小它。

Answer 1

如果您不希望滚动条出现，iframe 的宽度/高度需要匹配其源宽度/高度设置，因此我将其更改为 1950px/1110（包括一些边距）。

如果滚动条仍然出现（内容比 iframe 大），您通常会使用 overflow: hidden，虽然它还没有完全跨浏览器，但将 scrolling=no 添加到 iframe 标记是。

.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>

Answer 2

这段代码让你的 iframe 负责

answer

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