需要帮助使 iframe 响应答案

【问题标题】：Need help making iframe responsive需要帮助使 iframe 响应
【发布时间】：2021-03-30 08:32:31
【问题描述】：

我有一个 iframe 我想添加到我的 React.js 网站。 iframe 的 src 链接到另一个响应式网站（在此称为“图库”）。这意味着画廊的宽度和高度将根据网站大小而变化。如何调整 iframe 的宽度/高度/样式，以便像画廊一样，iframe 也显示所有网页内容，无论屏幕大小如何？

我尝试将 iframe 的宽度和高度设置为 100%。尽管 iframe 确实跨越了设备屏幕的整个宽度，而与大小无关，但不幸的是，将高度设置为 100% 并没有达到我想要的效果。 iframe 只显示了一小部分，其余部分被滚动条截断。如果我将滚动设置为“否”，iframe 的同一小部分仍将只显示。

我还尝试硬编码 iframe 的高度。如果我将高度设置得足够大以在较大的屏幕上显示所有内容，那么在较小的屏幕上仍然会截断一些内容。如果我为智能手机等小屏幕设置足够大的高度，那么在我不想要的大屏幕上，我的网站底部会有大量空白空间。

我不知道该怎么做。我尝试过的一些事情（例如将高度设置为 100% 并将滚动设置为否）来自 stackoverflow 本身，因此我尝试查看其他帖子。我不知道该怎么办。

如果需要，我可以共享代码；这是个人项目，不是学校项目，因此共享代码不会产生任何后果。

提前感谢您的帮助！

我的 HTML 代码 -

<div class = "container">
    <iframe title = "gallery" class = "responsive" src="LINK" frameborder="0" allowfullscreen scrolling="no">
    </iframe>
    </div>
</div>

我的 CSS 代码 -

.container {
  position: absolute;
  width: 100%;
  overflow: hidden;
  padding-top: 66.66%; 
}

.responsive {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

【问题讨论】：

如果您的代码不明显，请分享代码和您的技术选择。我以前曾使用过这样的 iframe，我希望您所描述的内容能够奏效。 iframe 尊重自己的渲染大小。
@DeanJames 用与 iframe 相关的代码更新了帖子。请注意，LINK 将替换为实际链接。
我认为问题在于 iframe 本身。您的 iframe html 等看起来不错。

标签： html reactjs iframe size iframe-resizer

【解决方案1】：

这个问题比它应该的要复杂得多，曾经有一个解决方案是 HTML 4 规范的一部分，但我预计它会因为难以可靠地解决内容而被放弃。

我前段时间写了一个库来解决这些问题，它被称为iframe-resize-react，应该在大多数情况下都可以工作

【讨论】：