object-fit 应选 cover、contain 或 scale-down：cover 等比缩放裁剪填满，适合封面；contain 等比缩放留白显全图，适合证件照；scale-down 仅大图缩放防模糊。
图片容器宽高固定时，object-fit 怎么选
固定尺寸容器（比如 300px × 200px）里塞不同比例的图片，想填满又不拉伸变形，object-fit 是核心。但选错值会直接导致裁切意外或留白明显。
常见错误是默认用 object-fit: fill——它强制拉伸填满，完全破坏原始宽高比；或者用 object-fit: none，图片原样居中，四周大片空白。
-
object-fit: cover：最常用。等比缩放后覆盖整个容器，超出部分裁剪。适合封面图、卡片图，但要注意关键内容别在边缘 -
object-fit: contain：等比缩放至完全可见，留白不可避免。适合产品图、证件照预览这类必须看全图的场景 -
object-fit: scale-down：只在原图比容器大时才缩放，否则保持原尺寸。小图不会被放大模糊，但可能和其它图高度不一致
CSS Grid 布局下图片自动等高，object-fit 还得配 height: 100%
Grid 容器设了 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))，每行图片高度不一致？那不是 Grid 的问题，而是图片自身没撑满行高。
Grid 轨道高度由内容决定，而 <img> 默认是内联元素，有基线对齐和底部留白。不显式设高，object-fit 就没作用对象。
- 必须给图片加
height: 100%或height: 100vh（视场景），且父容器不能是height: auto无约束状态 - 同时加
display: block消除内联间隙，否则底部多出几像素空白 - 如果 Grid 行高用
grid-auto-rows: 200px固定，图片只需height: 100%+object-fit: cover即可对齐
IE 不支持 object-fit，fallback 方案怎么写才不崩
IE11 及更早版本完全无视 object-fit，直接按默认行为渲染，常导致图片溢出或错位。不能只靠 @supports 包一层就完事——它在 IE 里根本不执行。
真正可用的 fallback 是用背景图替代 <img> 标签，配合 background-size 模拟效果，但前提是图片 URL 可控、不需要 SEO 或无障碍支持。
- 用
div替代img，通过background-image: url(...)加载 -
background-size: cover对应object-fit: cover，contain同理 - 必须加
background-position: center，否则默认左上角对齐，裁切位置完全不对 - 如果必须保留
<img>（比如 CMS 输出不可改），只能用 JS 检测objectFit支持，动态替换为背景图或加 polyfill（如object-fit-images），但注意 polyfill 会阻塞渲染
srcset + sizes 配合 object-fit 时，浏览器到底加载哪张图
很多人以为 srcset 和 sizes 是为响应式图片“换尺寸”，其实它们影响的是**资源选择逻辑**，和 object-fit 无关——后者只管怎么画进容器，不参与下载决策。
容易踩的坑是：写了 sizes="(max-width: 768px) 100vw, 50vw"，但容器本身用 width: 100% + padding-bottom: 56.25% 做响应式宽高比，此时 sizes 描述的宽度和实际渲染宽度对不上，浏览器可能下错图。
- 确保
sizes值反映图片在页面中的**预期渲染宽度**，不是父容器 CSS 宽度 - 用 Chrome DevTools 的 Network 面板勾选 “Disable cache” + 切换设备，看实际加载的
srcset中哪个 URL 被请求 -
object-fit: cover不会让浏览器优先选更大图；它只在渲染阶段做缩放/裁剪，跟下载无关
object-fit 本身，而在它和容器约束、资源加载、兼容性降级之间的耦合。一个值设错，可能整行卡片高度突变；一个 fallback 没兜住，IE 里图片直接堆叠错位。这些地方没法靠“试试看”绕过去。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
