最常用做法是用 overflow: hidden 配合固定宽高的父容器裁剪图片，再通过 object-fit 和 object-position 控制缩放与显示区域；背景图方案更灵活但语义性弱；clip-path 仅适用于特殊形状裁剪。
用 overflow: hidden 裁剪图片显示区域
图片本身没变，只是容器“框”住它，超出部分不显示——这是最常用、最可控的做法。关键不是改 <img>，而是给它套个有尺寸和裁剪规则的父容器。
- 父容器必须设固定宽高（比如
width: 200px; height: 150px;），否则overflow: hidden不生效 - 图片默认会按原始尺寸撑开容器，所以得加
img { width: 100%; height: 100%; object-fit: cover; }控制缩放方式 - 别只设
overflow: hidden却忘了定位：如果想局部显示中间或右下角，得配合position: relative+img { position: absolute; top: -20px; left: -30px; }
object-fit 和 object-position 配合控制裁剪位置
当容器尺寸固定，而你想让图片某一部分（比如人脸）始终居中显示，object-fit 决定怎么缩放，object-position 决定从哪截取。
-
object-fit: cover保持比例并填满容器，可能裁边；object-fit: contain完整显示但留白 -
object-position: 50% 50%（默认居中），object-position: 0 0显示左上角，object-position: 100% 100%显示右下角 - 注意兼容性：
object-fit在 IE 完全不支持，旧项目需用背景图方案替代
用 CSS 背景图替代 <img> 实现更灵活裁剪
当你需要精确控制显示区域、响应式偏移，或要叠加遮罩/滤镜时，把图片设为 background-image 更稳。
- 容器设
background-image: url("photo.jpg"); background-size: cover; background-position: center; - 通过
background-position: -10px 5px手动微调显示区域，比操作<img>更直接 - 无法获取图片的原生加载事件（如
onload），也不能被屏幕阅读器识别为内容图——语义性弱于<img>
避免用 clip-path 做常规裁剪
clip-path 能做任意形状裁剪，但日常“只显示一部分”没必要用它——性能差、兼容性坑多、调试困难。
立即学习“前端免费学习笔记（深入）”；
- Chrome/Firefox 支持尚可，但 Safari 对百分比坐标和 SVG 引用的支持不稳定
-
clip-path: inset(20px 30px)看似简单，实际在缩放或滚动时容易错位 - 如果只是矩形裁剪，
overflow: hidden+ 定位已足够；真要用clip-path，优先写成clip-path: url(#myClip)引用 SVG，别硬写 CSS 函数
object-fit 能替代容器约束。 
