只设 overflow: hidden 不行，因为图片本身未缩放或对齐控制，易导致左上角截断、主体偏移；object-fit: cover 必须配合容器明确宽高和 object-position 才能正确居中裁剪。
用 object-fit: cover + 固定容器宽高，是最轻量、可维护性最高的方案；别靠 JS 动态算尺寸，也别只加 overflow: hidden 就完事。
为什么只设 overflow: hidden 不行
单纯给父容器加 overflow: hidden 只是“切掉”多余部分，但图片本身没缩放或对齐控制，结果常是左上角被截、主体内容偏移——尤其在移动端横竖屏切换时，同一张图可能突然露出无关背景或裁掉人脸。常见错误还包括：img 默认是 inline 元素，底部自带空白间隙，进一步干扰视觉居中；若容器没设 position: relative，而你又用了 position: absolute 定位图片，它会直接飞到视口左上角。
object-fit: cover 必须配宽高声明
object-fit 不是“自动适配”，它只定义图像如何填满已知的框。所以父容器必须显式设置 width 和 height（百分比、vh、固定值均可），否则 cover 无框可填，行为退化为默认拉伸。
- 推荐写法：
.hero-img { width: 100%; height: 400px; }或响应式：.hero-img { width: 100vw; height: 70vh; } - 图片样式：
img { object-fit: cover; object-position: center; display: block; } -
object-position可调关键区域，比如想始终露出人脸：object-position: 50% 30%;
兼容老浏览器（IE11）怎么办
IE11 不支持 object-fit，但也不支持现代 CSS Grid 的 place-items 居中。此时退回“绝对定位 + 负 margin”方案更稳：
- 父容器设
position: relative、固定宽高、overflow: hidden -
img设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 再加
min-width: 100%; min-height: 100%确保撑满 - 注意：该方案下图片宽高比失配时，会等比放大并裁边，效果与
cover一致
别用 JS 动态设 max-width 截图式处理
看到“根据容器宽度动态改 img 的 max-width”这种方案要警惕——它只控宽，不管高；不处理宽高比失配；resize 或 orientationchange 时容易漏触发；且和现代 CSS 布局逻辑冲突。真正需要 JS 的场景只有两个：clip-path 非矩形裁剪，或 canvas 动态截图导出。日常响应式裁剪，CSS 足够。
最易被忽略的一点：所有方案都依赖父容器有明确尺寸上下文。如果父容器是 flex 或 grid 子项且未设 min-width/min-height，它可能塌缩为 0，导致 object-fit 失效或绝对定位失效——先检查父级盒模型，再调图片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
