根据 Iframe Width/Height 调整 Iframe 内容的大小答案

【问题标题】：Resize Iframe content according to Iframe Width/Height根据 Iframe Width/Height 调整 Iframe 内容的大小
【发布时间】：2022-01-26 06:01:14
【问题描述】：

如何调整 iframe 内容的大小以填充 iframe 的宽度/高度？

我已经更改了 Iframe 的宽度和高度以使其更大，但是内容并没有随之缩放，这会留下一堆空白（就像内容绝对位于 Iframe 的左上角一样）。

<iframe width="500px" height="300px" frameborder="0" 
  scrolling="no" src="someContent">
</iframe>

当您设置 Iframe 的宽度/高度时，为什么 Iframe 的内容不缩放？

【问题讨论】：

规模是什么意思？您的意思是要缩放内容吗？
我希望内容适合 iframe 新尺寸的大小。内容似乎是固定大小，所以当我增加 iframe 的宽度/高度时，内容的大小不会改变。
您可以控制 iframe 内容吗？是您可以编辑的网站吗？
您能否提供一个最小的示例（例如在 sn-p 中），以便社区可以更好地帮助您？
@AlexGru 。假设内容符合 iframe 中提到的宽度和高度。如果我将 iFrame 大小增加到 1000px/600px，则内容保持相同大小，但框架会增加。我希望增加内容的大小以填充新 Iframe 的尺寸。

标签： javascript html css iframe

【解决方案1】：

如果您无法控制 iframe 的内容（即无法编辑源），您可以尝试缩放 iframe，如下所示：

<iframe width="500px" height="300px" frameborder="0" 
  scrolling="no" src="someContent" 
  style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);">
</iframe>

您应该尝试使用height、width 和比例值来达到您想要的结果。

另见：Resize external website content to fit iFrame width

【讨论】：

使用这种方法，Iframe 的宽度和高度似乎会发生变化，但内容的大小不会发生变化。我正在测试的内容是 Excel 电子表格中的图表，如果这有什么不同的话。（使用onedrive通过Iframe在网页中嵌入图表）
您是否尝试过width、height 和scale 的不同组合？
我正在尝试使用比例尺，因为我希望 IFrame 具有特定的尺寸
恐怕您别无选择，因为您无法在 iframe 中编辑外部内容的样式。