width属性不保持比例，易致拉伸变形；应移除内联width/height，改用css的max-width:100%、height:auto或aspect-ratio实现响应式等比缩放。

width 属性本身**不保持比例**，反而极易导致拉伸变形——它只设宽度，高度由浏览器自由推算（或直接忽略 height），且会覆盖 CSS 的响应式控制。

为什么直接写 width="640" height="360" 会出问题

HTML 中的 width 和 height 是内联固有尺寸（intrinsic size），浏览器按像素硬渲染，不感知视频原始宽高比。常见后果包括：

• 移动端横竖屏切换时，width="640" 超出视口，触发横向滚动条
• 父容器变窄后，height="360" 仍被强制应用，画面被压扁或拉长
• CSS 的 max-width: 100% 或 aspect-ratio 完全失效，因为内联属性优先级高于外部样式
• 即使视频源是 4K，用户也得下载完整文件，仅因页面上显示为小尺寸

用 CSS 替代 width/height 属性才真正可控

删掉所有 width 和 height 内联属性，改用 CSS 控制尺寸和比例：

吐司AI消除

吐司AI消除是一款AI图片处理工具，Toast AI 推出的 AI 智能消除与去杂物工具。

下载

• 先清除干扰：document.querySelectorAll('video').forEach(v => { v.removeAttribute('width'); v.removeAttribute('height'); });
• 基础响应式：给 video 加 max-width: 100%; height: auto; —— 高度随宽度等比缩放
• 稳住 16:9 比例（推荐现代项目）：
  .video-wrapper { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
video { width: 100%; height: 100%; object-fit: cover; }
• 兼容旧浏览器（如 Safari padding-bottom: 56.25% 技巧，必须写在父容器上，且父容器不能设 height

object-fit 不是可选项，而是比例控制的关键开关

仅靠 aspect-ratio 或 padding-bottom 只能固定容器形状，但视频内容怎么填进去，全靠 object-fit：

• object-fit: contain → 完整显示，留黑边；适合教学、字幕类场景
• object-fit: cover → 填满裁边；主流推荐，避免黑边又保比例
• object-fit: fill → 强制拉伸铺满；**慎用**，必然变形
• 注意：object-fit 在 IE 完全不支持，若需兼容，得用绝对定位 + overflow: hidden 降级方案

最常被忽略的一点：哪怕用了 aspect-ratio，如果父容器没有 overflow: hidden，object-fit: cover 下溢出的画面仍会撑开布局。别省这一行 CSS。