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宽度/高度需要与其源widht / height设置匹配，因此我将其更改为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%;
}

将绝对定位的html设置为iframe

2 个答案: