如何不使用CSS让iframe铺满父元素？求JS/jQuery按比例适配方案

需求说明 #

需要让带有自定义ratio属性（格式如4:1、4:3、16:9）的iframe子元素，根据父容器的像素宽高自动拉伸/缩放，完全铺满父容器（可能会裁剪超出部分，确保无空白）。对应的HTML结构示例：

<div style="width:300px; height:713px;">
  <iframe ratio="4:1"></iframe>
</div>

<div style="width:713px; height:300px;">
  <iframe ratio="16:9"></iframe>
</div>

核心思路 #

1. 遍历所有带有ratio属性的iframe
2. 读取父容器的实际宽高
3. 解析ratio属性，计算iframe目标宽高比
4. 对比父容器宽高比与iframe目标比，决定缩放方向：
   • 若父容器比iframe更“扁”（宽高比更大）：按父容器高度缩放，宽度超出父容器
   • 若父容器比iframe更“高”（宽高比更小）：按父容器宽度缩放，高度超出父容器
5. 设置iframe的尺寸与位置，使其居中铺满父容器

原生JavaScript实现 #

function scaleIframesToFillParent() {
  // 获取所有带ratio属性的iframe
  const iframes = document.querySelectorAll('iframe[ratio]');
  
  iframes.forEach(iframe => {
    const parent = iframe.parentElement;
    if (!parent) return;
    
    // 获取父容器实际宽高
    const parentWidth = parent.offsetWidth;
    const parentHeight = parent.offsetHeight;
    if (parentWidth === 0 || parentHeight === 0) return;
    
    // 解析ratio属性，计算目标宽高比
    const [ratioW, ratioH] = iframe.getAttribute('ratio').split(':').map(Number);
    const targetRatio = ratioW / ratioH;
    const parentRatio = parentWidth / parentHeight;
    
    let iframeWidth, iframeHeight;
    
    // 计算iframe尺寸
    if (parentRatio > targetRatio) {
      // 父容器更扁，按高度缩放
      iframeHeight = parentHeight;
      iframeWidth = iframeHeight * targetRatio;
    } else {
      // 父容器更高，按宽度缩放
      iframeWidth = parentWidth;
      iframeHeight = iframeWidth / targetRatio;
    }
    
    // 设置iframe样式：铺满父容器，居中显示
    iframe.style.width = `${iframeWidth}px`;
    iframe.style.height = `${iframeHeight}px`;
    iframe.style.position = 'absolute';
    iframe.style.top = '50%';
    iframe.style.left = '50%';
    iframe.style.transform = 'translate(-50%, -50%)';
    iframe.style.border = 'none'; // 可选：去掉默认边框
    
    // 父容器需要设置相对定位，作为iframe的定位基准
    parent.style.position = 'relative';
  });
}

// 页面加载完成后执行
window.addEventListener('load', scaleIframesToFillParent);
// 窗口大小变化时重新计算
window.addEventListener('resize', scaleIframesToFillParent);

jQuery实现 #

如果项目已引入jQuery，可以用更简洁的写法：

function scaleIframesToFillParent() {
  $('iframe[ratio]').each(function() {
    const $iframe = $(this);
    const $parent = $iframe.parent();
    
    const parentWidth = $parent.width();
    const parentHeight = $parent.height();
    if (parentWidth === 0 || parentHeight === 0) return;
    
    const [ratioW, ratioH] = $iframe.attr('ratio').split(':').map(Number);
    const targetRatio = ratioW / ratioH;
    const parentRatio = parentWidth / parentHeight;
    
    let iframeWidth, iframeHeight;
    
    if (parentRatio > targetRatio) {
      iframeHeight = parentHeight;
      iframeWidth = iframeHeight * targetRatio;
    } else {
      iframeWidth = parentWidth;
      iframeHeight = iframeWidth / targetRatio;
    }
    
    $iframe.css({
      width: `${iframeWidth}px`,
      height: `${iframeHeight}px`,
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      border: 'none'
    });
    
    $parent.css('position', 'relative');
  });
}

// 页面加载与窗口resize时执行
$(window).on('load resize', scaleIframesToFillParent);

注意事项 #

• 父容器默认会被设置为position: relative，确保iframe的绝对定位基于父容器
• 如果不需要居中（允许裁剪一侧），可以去掉top、left和transform属性，直接设置top:0; left:0
• 若iframe内容需要适配缩放，可以在iframe内部页面添加相应的缩放逻辑

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