HTML 调整 iFrame 内容的大小答案

【问题标题】：HTML Resize content of iFrameHTML 调整 iFrame 内容的大小
【发布时间】：2020-06-01 16:43:14
【问题描述】：

我目前正在使用 sendgrid 的 prebuildt 电子邮件形式作为 iFrame。

一切都按预期工作。我遇到的唯一问题是，在移动设备上，iFrame 的内容太大而无法在屏幕上显示，正如您在图像上看到的那样：

所以我尝试用 scale: 0.5 调整内容的大小，但这只会使整个 iFrame 变小。

我当前的 CSS 代码如下：

 .bg-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    justify-content: center;
    align-items: center;
}

.modal-contents {
    height: 600px;
    width: 600px;
    background-color: white;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

.iframeClass{
    width: 100%;
    height:100%;
    overflow:hidden;
}

我的 HTML 是这样的：

<div class="bg-modal">
<div class="modal-contents">
    <iframe scrolling="no" class="iframeClass" frameborder="0" src="https://..."></iframe>
</div>
</div>

我不想显示滚动条。

有人知道这个响应问题的解决方案吗？

【问题讨论】：

标签： html css iframe responsive sendgrid

【解决方案1】：

您的设备分辨率低于 600 像素，因此它会横向滚动。

您可以使用max-width 来解决它。

解决方案

.bg-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    justify-content: center;
    align-items: center;
}

.modal-contents {
    height: 600px;
    width: 600px;
    max-width: 100%; /* This makes it so if the device is under 600px, it will resize to be the width of the screen and it will not overflow */
    background-color: white;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

.iframeClass{
    width: 100%;
    height:100%;
    overflow:hidden;
}

如果您仍然遇到问题，请尝试以下操作：

body {
    overflow-x: hidden;
}

【讨论】：

【解决方案2】：

您将模型内容的宽度和高度设置为 600 像素，并将 iframe 的高度和宽度设置为 100%。因此，无论屏幕大小如何，iframe 始终为 600 像素 * 600 像素。您可以通过将宽度设置为最大宽度并根据您的设计添加一些填充和合并来修复它。或者您可以在模型内容中使用 vw 表示宽度，使用 vh 表示高度。

.modal-contents {
    height: 600px;
    max-width: 600px;
    background-color: white;
    text-align: center;
    position: relative;
    border-radius: 4px;

}

.iframeClass{
    width: 100%;
    height:100%;
    overflow:hidden;
}

【讨论】：