如何根据屏幕尺寸调整iframe元素的大小？

Question

我有一个iframe元素（特别是商业智能仪表板），需要嵌入到网站中。有一个＆＃34; HTML编辑器＆＃34;在网站＆＃34;后端＆＃34; （即网站中指定用于页面管理员的部分）。

复制并粘贴iframe代码并随后调整高度和宽度以正确适合屏幕工作正常 - 但如果我在另一个屏幕上打开窗口，iframe尺寸不会根据不同的屏幕尺寸进行调整。

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

网络开发不是我的专长，所以如果我能提供更好的信息，请随时在评论部分询问。

编辑添加： 在前两个回复之后，我插入了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>代码段，但是当我点击＆＃34;更新＆＃34 ;在HTML编辑器中，代码片段重新出现。

Answer 1

您可以在iframe元素中使用内联样式。看看这个link。

我将宽度设置为100％，这意味着它将调整大小到容器的大小。高度是固定的，但如果它不能容纳在容器内，overflow: auto;将使卷轴显示出来。

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

  </iframe>
</div>

Answer 2

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

您这样做的方法是使用要更改CSS样式的标记内的style=""。

使宽度动态化的方法是使用大小作为百分比而不是像素。

<小时/> 例如：

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

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