真正有效的“局部截取”是用 object-fit + object-position 组合实现，而非 JS 或 Canvas；需设置容器宽高或 aspect-ratio，配合 img 的 width/height 100%，再通过 object-position 精确锚定关键区域，并用媒体查询按屏幕宽高比切换焦点。
小屏幕直接缩放整张大图会糊，拉伸又变形，真正有效的“局部截取”不是靠 JS 算坐标或 Canvas 重绘——而是用 object-fit + object-position 组合，在浏览器渲染层就只显示你想要的那一块。
为什么不能只靠 max-width: 100% 和 height: auto
这套组合只是等比缩放，图片整体变小，但关键内容（比如人脸、产品主视图）可能被挤到角落甚至切掉。它不控制“显示哪一部分”，只控制“缩多大”。
更糟的是：如果原图是横构图（16:9），小屏竖屏（9:16）下强行缩放，主体常被压在顶部或底部，用户得手动滚动才能看到重点。
object-fit: cover 必须配明确容器尺寸
很多人写了 object-fit: cover 却没反应，根本原因是容器没设高度——浏览器不知道“cover 到多高”，自然不裁。
必须确保：
- 外层 <div> 有显式 width 和 height（不能依赖内容撑开）
- 或用 aspect-ratio（如 aspect-ratio: 4/5）+ width: 100%，现代浏览器兼容性已足够好
- <img> 自身设 width: 100%; height: 100%，否则 object-fit 无作用对象
用 object-position 锚定关键区域
默认 object-position: center center 是几何居中，但人像常需“眼睛居中”，风景图可能要“地平线居中”。这时要主动偏移：
- object-position: center top → 优先显示上半部分（适合头像、站立人物）
- object-position: center bottom → 优先显示下半部分（适合产品平铺、建筑底部）
- object-position: 30% 20% → 横向偏左 30%，纵向偏上 20%，适合精确控制焦点
注意：object-position 只在 object-fit 为 cover、contain 或 scale-down 时生效；写成 50% 50% 和 center center 完全等价，纯属冗余
立即学习“前端免费学习笔记（深入）”；
响应式切换焦点要靠媒体查询 + aspect-ratio
单纯用 min-width 媒体查询容易误判：一台折叠屏手机展开后宽度超 1200px，但仍是竖屏比例。真正该匹配的是屏幕“胖瘦”：
- @media (min-aspect-ratio: 1/1) → 匹配正方形及以上（桌面、平板横屏）
- @media (max-aspect-ratio: 9/16) → 匹配典型手机竖屏
然后分别设置：img { object-position: center center; }@media (max-aspect-ratio: 9/16) { img { object-position: center top; } }
这样，同一张图在横竖屏下自动切换裁剪锚点，无需准备多套源图，也不触发额外 HTTP 请求。
最易被忽略的点：图片加载失败时 object-fit 和 object-position 全部失效——空白 <img> 没内容可定位。务必保证 src 可访问，或用 onerror fallback 替换占位图。
