如何调整 iframe 元素的大小以随屏幕尺寸变化？

Question

我有一个iframe元素（特别是商业智能仪表板）需要嵌入到网站中。网站的“后端”（即网站内指定给页面管理员的部分）有一个“HTML 编辑器”。

复制并粘贴iframe代码，然后调整高度和宽度以正确适应屏幕效果很好，但如果我在另一个屏幕上打开窗口，尺寸iframe不会针对不同的屏幕尺寸进行调整。

不幸的是，我认为我无法访问公司网站中的任何CSS文件（即，我认为我没有能力上传CSS文件），所以我不太确定我能用大多数CSS文件做什么对SO的建议。有谁知道如何将iframe尺寸设置为动态？

Web 开发不是我的专业，所以如果我可以提供更好的信息，请随时在评论部分提问。

编辑添加： 在前两个响应之后，我插入了 HTML 行

<iframe style="width:100%; height:500px;overflow:auto;">

iframe 的大小肯定发生了变化 - 但不幸的是，它后面的灰色空间（是填充吗？）开始以不同的大小出现，具体取决于计算机屏幕的大小。我拍摄了下图，红色箭头指向我想要填充 iframe 的灰色空间，蓝色箭头指向 iframe 本身：

以下是 HTML 编辑器中的新代码，但链接已更改（以保持匿名）：

<center>
    <div>
        <iframe style="width: 100%; height: 710px; overflow: auto;" src="https://app.powerbi.com/view?r=abc123..." frameborder="0" width="320" height="240">
        </iframe>
    </div>
</center>

不管怎样，我尝试删除标签width="320" height="240"末尾的代码片段<iframe>，但当我在 HTML 编辑器中单击“更新”时，代码片段又出现了。

Answer 1

即使您无法直接访问 CSS，您仍然可以使用内联样式更改 css。

方法是使用style=""要更改 CSS 样式的标签内部。

使宽度动态化的方法是将尺寸用作百分比而不是像素。

例如：

<iframe style="border: 0; width:100%; height: 500px; overflow: auto;" src="http://www.example.com"></iframe>

请注意width:100%;，这将导致 iframe 始终为屏幕尺寸的 100%。高度始终为 500px，但您可以将其更改为您喜欢的任何值。