用的width/height属性仅缩放不裁剪；真正裁剪需容器设宽高+overflow:hidden+object-fit:cover或绝对定位；精确控制用clip-path或canvas；服务端裁剪更优但需校正exif方向。
用 <img> 自带的 width 和 height 不是裁剪，是拉伸
很多人一上来就给 <img> 加 width 和 height，以为这样就能“裁掉多余部分”，结果发现图片被压扁或拉长了。这不是裁剪，是缩放 —— 浏览器只是强行把整张图塞进指定尺寸里。
真正裁剪，得让图片“只显示中间一块”，其余部分不可见。核心思路只有一个：用容器设固定尺寸 + 溢出隐藏 + 图片居中定位。
- 容器（比如
<div>）必须设 <code>width、height和overflow: hidden -
<img>不能用默认流式布局，得用position: absolute或object-fit: cover - 如果要兼容老浏览器（IE），优先选绝对定位方案；现代项目直接用
object-fit
object-fit: cover 是最简裁剪方案，但注意父容器必须有宽高
只要浏览器支持（Chrome 32+、Firefox 36+、Safari 9.1+、Edge 16+），一行 CSS 就能实现等比裁剪：
<div style="width: 200px; height: 150px; overflow: hidden;"> @@##@@ </div>
关键点：
-
object-fit: cover会让图片等比缩放并填满容器，超出部分自动裁掉 - 容器 必须显式设置宽高，否则
height: 100%无效（父级高度为 auto 时 100% 算不出来） - 如果想居中裁剪顶部或底部，用
object-position：比如object-position: center top会固定显示上半部分
需要精确控制裁剪区域？用 clip-path 或 Canvas
object-fit 只能等比缩放后居中裁，没法指定“从 (50px, 30px) 开始截 200×150 像素”。真要像素级控制，有两个路子：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
clip-path: inset(30px 50px 70px 100px)—— 适合静态裁剪，但不支持百分比偏移，且 Safari 对 inset 的兼容性略差（iOS 15.4+ 才稳定） - Canvas 方案：用
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)精确取源图某块画到目标区域。适合上传后预览、头像裁剪等交互场景 - 注意：Canvas 裁剪生成的是新图像数据，不会改变原图文件；如需保存，得调
canvas.toDataURL()
服务端裁剪更可靠，但前端得配好参数传过去
用户上传一张 4000×3000 的图，前端硬裁成 200×150 显示，其实还是加载了整张大图 —— 白耗流量。真要性能和体验兼顾，裁剪该交给服务端。
常见做法是：前端用 JS 获取用户选定的裁剪框（x, y, width, height, scale），拼成 URL 参数发请求：
https://api.example.com/image/abc.jpg?crop=100,50,300,225&scale=0.5
服务端按参数读图、裁剪、压缩、返回小图。前端只需要确保传的坐标没越界（比如 x + width > originalWidth 就要截断），不然服务端可能返回错误或空白。
这个环节最容易漏的是：没考虑图片原始方向（EXIF orientation）。用户手机拍的竖图，在前端 JS 里读出的宽高可能是反的，直接传坐标会裁歪 —— 得先用 exif-js 或 createImageBitmap 解析方向再校正。
