如何让IFrame实现响应式并保持桌面端1600×1100比例？

需求与现有代码 #

需要实现IFrame的响应式设计，适配手机、平板设备，同时在桌面端保持1100px高度、1600px宽度的固定比例。现有代码如下：

HTML代码 #

<html> 
  <body> 
    <div class="parent">
      <iframe id="iframe" src=""></iframe>
      <div class="overlay"></div>
    </div>
      <script src="main.js"></script> 
    </body> 
</html> 

CSS代码 #

.parent {
  position: relative;
  height: 1100px; 
  width: 1600px; 
  right: 50%;
}

.overlay {
  background-color: #201E34;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 28px;
  width: 100%
}

iframe { 
  height: 100%;
  resize: both;
  width: 100%;
} 

JavaScript代码 #

var iframe = document.querySelector('#iframe'); 
iframe.loading = 'lazy';
iframe.setAttribute('src', 'https://datastudio.google.com/embed/reporting/23309a0f-9bdc-4c62-9f4c-5d58591e1017/page/VgD');

修改建议 #

核心CSS修改（实现响应式比例） #

通过padding-top比例法实现固定宽高比的响应式容器，同时限制桌面端的最大尺寸：

.parent {
  position: relative;
  width: 100%;
  max-width: 1600px; /* 桌面端最大宽度 */
  max-height: 1100px; /* 桌面端最大高度 */
  margin: 0 auto; /* 容器水平居中 */
  /* 计算宽高比：1100/1600 = 68.75%，用padding-top维持比例 */
  padding-top: 68.75%;
  height: 0; /* 让padding-top控制容器高度 */
}

.overlay {
  background-color: #201E34;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 28px;
  width: 100%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  resize: both;
  overflow: auto; /* 内容溢出时显示滚动条 */
  border: none; /* 可选：去掉默认边框 */
}

说明：

• 使用padding-top: 68.75%维持16:11的宽高比，容器宽度随屏幕缩放时，高度会自动按比例调整。
• max-width和max-height限制桌面端的最大尺寸，超过1600px宽度时容器不再放大，保持固定比例。
• 将iframe设置为绝对定位，使其完全填充父容器。

可选JavaScript优化 #

现有JS代码已实现懒加载，若需要进一步优化体验，可添加以下逻辑：

var iframe = document.querySelector('#iframe'); 
iframe.loading = 'lazy';
iframe.setAttribute('src', 'https://datastudio.google.com/embed/reporting/23309a0f-9bdc-4c62-9f4c-5d58591e1017/page/VgD');

// 可选：监听iframe加载完成，处理内容自适应
iframe.addEventListener('load', function() {
  // 若iframe内部内容需要调整，可在此处执行相关逻辑
  // 例如：发送消息给iframe内部页面调整尺寸
  // iframe.contentWindow.postMessage({ action: 'resize' }, '*');
});

内容的提问来源于stack exchange，提问作者Bakhodir Ibragimov