object-fit: cover 是首选方案，因其专为图片设计、保持宽高比、不拉伸变形、保留 alt 和 seo；需容器设显式宽高，img 设 100% 宽高，配合 object-position 精准裁剪。
用 object-fit: cover 配合显式容器尺寸，是最直接、语义正确且兼容性够用的方案。其他方式如 overflow: hidden + 定位或 clip-path 要么增加维护成本，要么牺牲可访问性或兼容性。
为什么 object-fit: cover 是首选
它专为内容图片设计，保持原始宽高比，缩放至短边撑满容器、长边溢出，再自动裁剪——整个过程不拉伸、不变形、保留 alt 文本和 SEO 价值。关键在于它作用于 <img> 元素本身，不是靠父容器“藏”掉内容。
- 必须给容器设明确的
width和height（不能是min-height或max-width），否则cover没有裁剪基准 -
img需设width: 100%; height: 100%，确保它真正撑满容器；只写width: 100%不够，高度会塌陷 - 现代浏览器（Chrome 32+、Firefox 36+、Safari 10.1+、Edge 16+）均支持，IE 不支持但已基本退出主流场景
object-position 控制裁剪哪一部分
默认居中裁剪，但很多场景需要固定显示顶部、左侧或某个焦点区域。这时靠 object-position 微调裁剪锚点，比手动 transform 更稳定、更响应式。
-
object-position: center top→ 优先保留上半部分，裁剪底部（适合头图文字压在下方的场景） -
object-position: left center→ 左侧内容始终可见，右侧随容器变窄被裁（如 Nike 英雄图） -
object-position: 20% 30%→ 支持百分比定位，精确对齐视觉重心 - 注意：它只影响裁剪起始位置，不改变缩放行为；
object-fit: cover仍是前提
常见失效原因与排查点
90% 的“裁剪没生效”问题，其实不是 CSS 写错，而是盒模型失控。
- 容器父级高度为
auto，导致height: 100%计算结果为 0 —— 检查是否漏了父容器的height或min-height - Flex/Grid 容器中，子项默认
min-width: auto/min-height: auto，会阻止img缩小 —— 加min-width: 0或flex-shrink: 0 - 图片原始分辨率远低于容器尺寸（如 300×200 的图塞进 800×600 容器）→
cover会放大失真，建议原图 ≥ 容器最大显示尺寸 - 用了
background-image却误配object-fit→ 它只对<img>和<video></video>有效；背景图请用background-size: cover
要不要加 overflow: hidden
多数现代浏览器在 object-fit: cover 下会自动隐藏溢出，但显式声明 overflow: hidden 在容器上仍是推荐做法——它兜底处理旧版 Safari 或某些 Flex 场景下的渲染异常，且语义清晰。
- 加在容器上，不是
img上 - 不影响
object-fit行为，只是多一层保险 - 如果同时用
clip-path或动画，overflow: hidden可能干扰边缘渲染，此时需权衡
真正容易被忽略的是容器尺寸的“确定性”：哪怕只差一个 height: auto 没覆盖到，object-fit: cover 就会退化成普通等比缩放。别假设父级会帮你撑开高度，显式写死或用 aspect-ratio（CSS 新属性，2026 年已广泛支持）才是稳解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
