我有一个iframe要添加到我的React.js网站。iframe的src链接到另一个响应网站(在此称为"gallery"(。这意味着画廊的宽度和高度将根据网站的大小而变化。如何调整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;
}
这个问题比它应该的要复杂得多，曾经有一个解决方案是HTML4规范的一部分，但我预计它会被删除，因为它很难可靠地解决当晚的内容。
我不久前写了一个库来解决这些问题，它被称为iframe resize react，应该适用于大多数情况