IE浏览器视频比例调整方法

一分耕耘，一分收获！既然都打开这篇《IE浏览器视频比例失调怎么调》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

IE11中video标签不支持aspect-ratio且忽略width/height语义，需用padding-top百分比容器配合绝对定位实现等比缩放，object-fit无效但可用contain防拉伸，poster尺寸须匹配视频比例，preload避免auto，动态插入需预设样式或监听loadedmetadata修正。

IE11 中 标签默认不保持宽高比

IE11 对 HTML5 的 aspect-ratio 完全不支持，且会忽略 width/height 属性的语义（只当初始尺寸用），导致拉伸或裁剪。这不是 bug，是它对响应式视频的实现缺失。

常见现象：设置 width="100%" 后高度塌陷，或强制设 height 导致画面变形；object-fit: cover 在 IE11 中无效（需 polyfill 或绕过）。

• 必须显式控制容器尺寸，不能依赖 video 自身缩放逻辑
• 优先用 CSS 容器包裹，而非直接操作 的宽高属性
• 避免在 IE 中使用 aspect-ratio: 16/9 或 aspect-ratio: 4/3 —— 它们被完全忽略

用 padding-top 百分比实现 IE 可用的等比容器

这是最稳定、无需 JS、兼容 IE8+ 的方案：利用子元素 position: absolute 脱离文档流 + 父容器 padding-top 占位来锁定比例。

<div class="video-container">
  <video controls>
    <source src="demo.mp4" type="video/mp4">
  </video>
</div>
<p><style>
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /<em> 16:9 = 9/16 = 0.5625 </em>/
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /<em> IE11 不支持，但至少不拉伸 </em>/
}
</style></p>

注意：object-fit: contain 在 IE11 中无效，但该写法仍可防止溢出；若需居中黑边，可加 background: #000 到容器上。

video 的 poster 和 preload 在 IE 中的行为差异

IE11 加载 poster 图片时可能触发宽高重算，导致短暂比例跳变；preload="metadata" 在部分 IE11 版本中会阻塞首帧渲染，间接影响尺寸稳定。

• 确保 poster 图片分辨率与视频原始比例一致（如 1280×720），否则 IE 会按图片原始尺寸撑开容器
• 避免 preload="auto" —— IE 可能提前加载整个视频并卡住布局计算
• 如果用 JS 动态插入 ，务必在插入前已设置好容器样式，不要等 loadedmetadata 再调整尺寸

JS 补丁：监听 loadedmetadata 后手动修正 IE 视频尺寸

当必须动态适配不同分辨率视频时，可在 IE 中用 JS 获取原生宽高并反向设置容器比例。

if (navigator.userAgent.indexOf('MSIE ') > 0 || navigator.userAgent.indexOf('Trident/') > 0) {
  const video = document.querySelector('video');
  video.addEventListener('loadedmetadata', function() {
    const ratio = this.videoHeight / this.videoWidth;
    const container = this.parentElement;
    container.style.paddingTop = (ratio * 100) + '%';
  });
}

这个补丁只应在必要时启用 —— 多数场景用纯 CSS 容器更可靠；另外，IE 中 videoWidth/videoHeight 在 loadedmetadata 阶段才可用，之前读出来是 0。

真正麻烦的不是怎么调比，而是 IE11 会把 当成 inline 元素处理，哪怕你写了 display: block，它有时仍会吃掉底部空白——记得给容器加 font-size: 0 或 line-height: 0 防止意外间隙。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《IE浏览器视频比例调整方法》文章吧，也可关注golang学习网公众号了解相关技术文章。