调整iframe尺寸适配父div：Divi嵌入Adobe Edge动画问题

1. 替换Divi Code模块嵌入代码 #

直接在Code模块中输入以下代码，替换原有嵌入内容，src替换为你的动画页面地址即可：

<div class="edge-anim-wrapper" style="width: 100%; height: 100%; margin: 0; padding: 0;">
    <iframe 
        src="你的动画页面地址"
        style="width: 100%; height: 100%; border: none; overflow: hidden; display: block;"
        frameborder="0"
        scrolling="no"
        allowfullscreen
    ></iframe>
</div>

2. 清除Divi Code模块默认边距 #

Divi Code模块默认自带内边距，会导致iframe和父容器出现空隙，按需选择以下任意一种方法修复：

• 单模块修改：进入当前Code模块的「高级」选项卡→「自定义CSS」→「主元素」输入框，添加以下代码：

  padding: 0 !important;
  margin: 0 !important;
  

• 全局复用修改：给需要嵌入动画的Code模块添加自定义CSS类anim-iframe-module，再进入Divi主题选项→「自定义CSS」添加全局样式：

  .anim-iframe-module {
    padding: 0 !important;
    margin: 0 !important;
  }
  

3. 固定比例自适应方案（可选） #

如果你的动画为固定宽高比，不需要撑满任意高度的父容器，可使用比例容器方案，兼容性更强。以16:9比例为例，Code模块代码替换为：

<div class="edge-anim-wrapper" style="position: relative; width: 100%; padding-top: 56.25%;">
    <iframe 
        src="你的动画页面地址"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; overflow: hidden;"
        frameborder="0"
        scrolling="no"
        allowfullscreen
    ></iframe>
</div>

可根据动画原始比例调整padding-top数值，计算方式为：高度/宽度*100%，如4:3比例对应数值为75%。

4. 动态尺寸适配（可选） #

如果父容器尺寸会随用户操作动态变化，可添加以下同域适配JS，自动同步iframe尺寸：

<script>
function resizeIframe() {
  const iframe = document.querySelector('.edge-anim-wrapper iframe');
  if (iframe) {
    iframe.style.height = iframe.parentElement.clientHeight + 'px';
    iframe.style.width = iframe.parentElement.clientWidth + 'px';
  }
}
window.addEventListener('resize', resizeIframe);
window.addEventListener('load', resizeIframe);
</script>

内容的提问来源于stack exchange，提问作者Nick Villaume