最常用方法是overflow:hidden配合定位或object-fit。方法一用容器裁剪，设固定宽高和overflow:hidden，图片绝对定位并用transform微调；方法二用object-fit:cover等属性直接作用于img标签，配合object-position控制对齐；方法三用clip-path实现非矩形裁剪，但IE不支持。
用 overflow: hidden 配合定位或 object-fit 是最常用、最直接的方法。
方法一：用容器裁剪（overflow + 定位）
给图片的父容器设置固定宽高和 overflow: hidden，再通过 position 或 transform 调整图片位置，实现局部显示。
- 容器设为相对定位，图片设为绝对定位，用
top/left控制显示区域 - 图片宽度高度设为大于容器（如
width: 200%），再配合transform: translate(-25%, -25%)微调 - 适合需要精确控制裁剪哪一部分的场景，比如头像居中裁切
方法二：用 object-fit（推荐用于响应式）
直接作用于 <img alt="HTML怎么让图片在容器中实现裁剪显示" > 标签，不依赖父容器隐藏，语义清晰，适配性强。
-
object-fit: cover—— 等比缩放填满容器，超出部分裁剪（最常用） -
object-fit: contain—— 等比缩放至全部可见，留白（不裁剪） -
object-fit: fill—— 拉伸填充，可能变形 - 记得同时设置
object-position控制对齐，例如object-position: center top
方法三：用 clip-path（灵活但兼容性稍弱）
可实现圆角、圆形、多边形等非矩形裁剪，适合特殊视觉需求。
立即学习“前端免费学习笔记（深入）”；
- 例如圆形裁剪：
clip-path: circle(50% at center) - 矩形裁剪（类似 overflow）：
clip-path: inset(10px 20px) - 注意 IE 不支持，现代浏览器基本没问题；移动端 Safari 从 iOS 9.3+ 开始支持
小提醒：别忘了设置图片尺寸
如果 <img alt="HTML怎么让图片在容器中实现裁剪显示" > 没设宽高，object-fit 可能无效；容器也建议明确宽高，否则裁剪效果不可控。
- 给图片加
width: 100%; height: 100%，确保它撑满容器 - 容器用
display: block避免默认行内元素的基线间隙 - 响应式下可结合
aspect-ratio固定宽高比，防止拉伸变形
