IE浏览器中100%宽度固定高度视频的object-fit替代方案

嘿，这个问题我碰到过好多次了——IE确实不买object-fit的账，但咱们有靠谱的替代方案，能完美实现你要的拉伸填充整个容器的效果（和object-fit: fill完全一致）。

方案一：纯CSS搞定（不用写JS） #

这个方法靠绝对定位和基础CSS规则模拟拉伸效果，正好匹配你不需要保持视频宽高比的需求。

修改你的CSS代码就行，直接替换原来的样式：

#mainContainer {
  width: 100%;
  height: 750px;
  border-bottom: solid 4px #9B51E0;
  position: relative;
  overflow: hidden; /* 新增：把超出容器的视频部分裁掉 */
}

#mainVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 删掉object-fit: fill，换成下面这俩 */
  min-width: 100%;
  min-height: 100%;
  opacity: 0.85;
}

原理很简单：

• 给容器加overflow: hidden，防止视频撑破容器
• 让视频直接占满容器的宽高，因为fill就是要拉伸，所以不用管原始比例，直接铺满就行

如果怕影响现代浏览器的效果，可以用CSS特性查询，只给IE用这套规则：

#mainVideo {
  width: 100%;
  height: 750px;
  object-fit: fill; /* 现代浏览器正常用 */
  position: absolute;
  opacity: 0.85;
}

/* 仅IE生效（因为IE不支持@supports） */
@supports not (object-fit: fill) {
  #mainVideo {
    object-fit: unset;
    width: 100%;
    height: 100%;
  }
  #mainContainer {
    overflow: hidden;
  }
}

方案二：JS辅助（更稳妥，适配所有IE版本） #

要是纯CSS在某些老IE里有小问题，用JS动态设置视频尺寸就稳了：

function stretchVideoToFill() {
  const container = document.getElementById('mainContainer');
  const video = document.getElementById('mainVideo');
  
  if (!video || !container) return;
  
  // 直接让视频尺寸和容器完全一致，模拟fill效果
  video.style.width = `${container.offsetWidth}px`;
  video.style.height = `${container.offsetHeight}px`;
}

// 页面加载完执行一次
window.addEventListener('load', stretchVideoToFill);
// 窗口 resize 时重新调整
window.addEventListener('resize', stretchVideoToFill);

HTML结构不用改，CSS里保留现代浏览器的object-fit，再用特性查询给IE降级：

#mainContainer {
  width: 100%;
  height: 750px;
  border-bottom: solid 4px #9B51E0;
  position: relative;
}

#mainVideo {
  width: 100%;
  height: 750px;
  position: absolute;
  opacity: 0.85;
}

/* 现代浏览器用object-fit */
@supports (object-fit: fill) {
  #mainVideo {
    object-fit: fill;
  }
}

/* IE需要overflow:hidden */
@supports not (object-fit: fill) {
  #mainContainer {
    overflow: hidden;
  }
}

这个JS方案会强制视频和容器尺寸完全匹配，在任何IE版本里都能稳定表现。

小提醒 #

你要的是fill（拉伸填充），所以这俩方案都完美适配；如果是cover或contain，逻辑会不一样，但你的需求刚好匹配~

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