object-fit 是控制视频等内容在容器中缩放适配方式的 CSS 属性，不改变原始宽高比；常用值包括 fill（拉伸变形）、contain（完整显示留黑边）、cover（等比填满裁剪）、none（原尺寸）和 scale-down（取 contain 与 none 中较小者）。
object-fit 是 HTML5 视频（以及图片、iframe 等替换元素）渲染时控制内容与容器比例关系的核心 CSS 属性。它不改变视频原始宽高比，而是决定视频帧如何“适配”到指定的 元素盒模型内，直接影响画面是否被裁剪、拉伸或留黑边。
常见取值及视觉效果
以下是最常用的 5 种取值，适用于大多数视频布局场景：
- fill：强行拉伸填满容器，忽略原始宽高比 → 画面可能严重变形
- contain：保持宽高比，完整显示整个视频帧 → 容器内可能出现上下或左右黑边（推荐用于预览、缩略图）
- cover：保持宽高比，填满容器 → 超出部分被裁剪（最常用，适合全屏播放、海报图）
- none：原尺寸显示，不缩放 → 若视频比容器小则留空，比容器大则溢出
-
scale-down：等效于
contain或none中更小的那个 → 仅当视频本身大于容器时才缩放
与 video 元素 width/height 和 aspect-ratio 的配合
单独设置 object-fit 不足以保证响应式稳定性。需结合：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用
width: 100%; height: auto;或aspect-ratio: 16 / 9;固定容器比例，避免因父容器变化导致布局抖动 - 避免同时设置
width和height为固定像素值（如width: 640px; height: 360px;），否则cover可能意外裁掉关键区域 - 移动端建议搭配
max-width: 100%; height: auto;防止横向溢出
实际开发中易忽略的细节
这些点常引发“明明写了 cover 却还是有黑边”类问题：
- 父容器设置了
overflow: hidden;？若未设置，cover裁剪部分可能溢出可见区域，造成错觉 - video 标签是否包含
controls？控件会增加底部高度，影响整体比例计算，建议用box-sizing: border-box;统一处理 - 某些浏览器（如旧版 Safari）对
object-fit支持不完整，可加-webkit-object-fit: cover;兼容 - 使用
poster图片时，poster 同样受object-fit控制 —— 无需额外写样式
一个简洁可靠的视频容器写法示例
兼顾响应式、比例稳定和主流兼容：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
