object-fit: cover 配合百分比 object-position 可实现响应式精准裁剪，需避免像素偏移、确保容器有明确宽高，并注意高分屏和跨域等细节。
用 object-fit + object-position 控制响应式裁剪区域
响应式场景下，图片容器宽高会变（比如从 300×200 缩到 150×100），但你想始终显示原图的“左上角 1/4”或“人物脸部”，不能靠固定像素偏移。这时候 object-fit: cover 是基础，object-position 必须用百分比而非像素值。
常见错误是写 object-position: 20px 10px —— 容器一缩放，偏移就错乱；正确做法是 object-position: 0 0（左上对齐）、object-position: 100% 50%（右边缘垂直居中）。
注意两点：
– object-fit: cover 前提是图片宽高比 ≠ 容器宽高比，否则没裁剪效果；
– 如果容器高度由内容撑开（height: auto），object-position 的垂直百分比可能失效，必须给容器设明确 height 或用 min-height。
overflow: hidden 容器在 flex/grid 布局里失效的原因
你写了 .card { display: flex; } .img-wrap { width: 200px; height: 200px; overflow: hidden; }，但图片还是溢出——大概率是父级 flex 容器没限制子项伸缩行为。
立即学习“前端免费学习笔记（深入）”；
解决方法：
– 给 .img-wrap 加 flex-shrink: 0，防止被压缩变形；
– 或者用 min-width: 0; min-height: 0 重置 flex 项的默认最小尺寸约束；
– grid 场景同理，如果容器是 grid-template-columns: 1fr 2fr，需确认该格子是否设置了 min-width，否则 overflow: hidden 失效。
别依赖父容器“看起来有宽高”——用浏览器开发者工具检查 computed styles，确认 width 和 height 确实是数值，不是 auto。
需要导出裁剪后新图片？Canvas 的 drawImage() 九参数必须对齐原图像素
用户拖选一个区域，你想生成一张只含该区域的新图，不能靠 CSS 截图（那是渲染层快照，模糊、失真、跨域失败）。必须用 Canvas 的 drawImage() 九参数形式，且前四个参数（sx, sy, sWidth, sHeight）必须基于原图真实尺寸，不是 canvas 显示尺寸。
关键步骤：
– 用 img.naturalWidth / img.naturalHeight 获取原图像素尺寸；
– 用户在 canvas 上拖出的矩形坐标（event.offsetX）要通过 canvas.getBoundingClientRect() 换算成设备无关像素，再按缩放比映射回原图坐标；
– 跨域图片务必加 crossOrigin="anonymous" 属性，否则 toBlob() 静默失败，控制台无报错。
漏掉 window.devicePixelRatio 是高频坑：高分屏下 canvas 实际像素是 CSS 像素的 2 倍，不校正会导致裁剪区偏移一倍距离。
IE 兼容或复杂对齐需求时，background-image 更可控
IE 11 及更早版本不支持 object-fit / object-position，而你又不想降级为整页 JS 判断，background-image 是最稳的 fallback 方案。
优势明显：
– background-position 支持像素、百分比、关键词混合，例如 background-position: -10px 0 就是向左多露 10px，等效于右移裁剪框；
– background-size 设为 200% 200% 再配 background-position: right top，就能精准显示右上 1/4；
– 不受 img 标签语义和加载时机干扰，CSS 控制更直接。
缺点是无法用 JS 读取原始图片尺寸，所有偏移都得预估或服务端注入；另外 alt 文本、SEO、可访问性全丢失，仅适合装饰性图片。
真正难的从来不是写哪行代码，而是搞清“当前看到的坐标，到底对应原图哪个像素”。缩放、设备像素比、滚动偏移、CSS transform，任何一个没参与计算，裁剪就偏了。
