用 overflow: hidden 套固定尺寸容器 + object-fit 和 object-position 控制缩放与裁剪起点，是最稳、最语义清晰、最易维护的做法；单纯 width/height 会拉伸变形，需配合容器裁剪与定位逻辑。
直接说结论：**用 overflow: hidden 套固定尺寸容器 + object-fit 和 object-position 控制缩放与裁剪起点，是最稳、最语义清晰、最易维护的做法**。别一上来就写 clip-path 或硬算 clip: rect()，那是在给自己埋兼容性和调试坑。
为什么不能只靠 width/height 缩放图片？
单纯设 img { width: 100%; height: 50%; } 只会拉伸变形，不是“显示一半”。浏览器不会自动帮你截取内容区域——它只是按比例缩放整个图像，然后留白或溢出。真正要“只显示上半部分”或“只显示右半边”，必须配合容器裁剪边界和图像定位逻辑。
-
overflow: hidden必须作用在有明确width和height的父容器上，否则无效 - 图片本身得用
object-fit: cover（填满不拉伸）或object-fit: none（原尺寸定位），再靠object-position移动“视口” - 例如想显示上半部分：
object-position: top；想显示右半边：object-position: right
object-position 怎么精准控制“一半”？
object-position 默认是 50% 50%（居中），但它支持像素和百分比混合写法，能实现像素级偏移。比如一张宽高比 4:3 的图放进 200×200 容器，想只显示右半边：
.crop-right {
width: 200px;
height: 200px;
overflow: hidden;
}
.crop-right img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 100% 50%; /* 显示右边缘对齐，垂直居中 */
}-
object-position: 100% 50%= 图像右边缘贴容器右边缘，垂直居中 - 想显示严格右半边（即从水平中点开始往右）？用
object-position: 50% 50%+object-fit: none，再手动设img { width: 400px; height: 300px; margin-left: -200px; }——但这就退化成绝对定位方案，不如直接用背景图 - 注意：IE 全系不支持
object-fit/object-position，旧项目必须降级为background-image方案
什么时候该换用 background-image？
当你需要微调到像素级偏移、或容器尺寸动态变化（如响应式宽度）、或要叠加滤镜/遮罩时，background-image 比 <img> 更直接可控。
立即学习“前端免费学习笔记（深入）”；
- 用
background-position: -10px 0向左偏移 10px，等效于让图片“多露出左边 10px”，也就是右半边整体右移 - 想显示右上 1/4 区域？
background-position: right top; background-size: 200% 200%;，再配background-repeat: no-repeat - 缺点明显：无法监听
onload/onerror，屏幕阅读器无法识别为内容图，SEO 不友好 - 如果图片是用户上传头像、商品主图这类关键内容，优先保
<img>语义；如果是装饰性 banner、图标切片，放心用背景
clip-path 和 clip: rect() 别乱用
clip: rect() 已废弃，Chrome/Firefox 新版本已不支持；clip-path: inset() 虽能实现矩形裁剪，但 Safari 对百分比值支持不稳定，滚动/缩放时容易错位。
- 日常“显示一半”需求，
overflow: hidden+object-position组合已完全覆盖 -
clip-path真正适合的场景是：非矩形裁剪（比如六边形头像、波浪形 Banner）、动画裁剪路径、或配合 SVG mask 做复杂遮罩 - 如果非要用，写成
clip-path: url(#myClip)引用内联 SVG，别硬写 CSS 函数——后者在不同设备上渲染差异大
最容易被忽略的一点：所有基于容器裁剪的方案，都依赖图片加载完成后的自然尺寸。如果图片异步加载、或 JS 动态插入，记得等 img.naturalWidth 可读后再计算 object-position 值，否则可能偏移失效。
