用 object-fit: cover 可在正方形容器内自动裁剪图片而不变形，需配合固定宽高的容器、overflow-hidden 和 w-100/h-100；注意 ie 不支持，前端裁剪需校准缩放比。
用 object-fit: cover 实现正方形容器内的自动裁剪
bootstrap 本身不提供“自动裁剪”功能，它只负责布局和容器样式；真正控制图片如何填满容器、是否拉伸或裁剪的，是 css 的 object-fit。如果你把图片放进一个固定宽高的正方形盒子（比如 width: 100px; height: 100px;），又不想让它变形，object-fit: cover 就是最直接有效的解法。
常见错误现象：用 .rounded-circle 或 .img-fluid 后图片被压缩、留黑边、或只显示左上角一小块——那是因为没配对设置容器尺寸 + object-fit。
- 必须给图片父容器明确的正方形尺寸（如
width: 80px; height: 80px;），不能只靠max-width或height: auto - 图片自身需加
style="object-fit: cover;"或定义 class 统一设置，否则默认是fill（强制拉伸） - 注意兼容性：
object-fit在 IE 完全不支持，如果项目还需兼容 IE，得换方案（比如用背景图 +background-size: cover）
Bootstrap 4/5 中快速创建正方形图像容器的 class 组合
Bootstrap 没有内置 “正方形裁剪图” class，但你可以用现有工具搭出可靠组合。重点不是“用哪个 class”，而是“哪几个一起用才不翻车”。
使用场景：头像、商品缩略图、卡片图标等需要统一尺寸且保留关键内容的场合。
- 容器加
class="d-flex align-items-center justify-content-center overflow-hidden"：确保内容居中，溢出隐藏（这是裁剪的关键） - 图片加
class="w-100 h-100"+ 行内style="object-fit: cover;"，或抽成自定义 class 如.img-cover - 避免混用
.img-fluid：它会强制按比例缩放并设max-width: 100%，跟正方形容器冲突
示例 HTML：
<div class="d-flex align-items-center justify-content-center overflow-hidden" style="width: 96px; height: 96px;"> @@##@@ </div>
为什么不用 .rounded-circle 就以为能裁成圆？
.rounded-circle 只是加圆角边框，它本身不改变图片尺寸逻辑，也不触发裁剪。如果图片不是正方形，加了这个 class 后你会看到椭圆边框包着一个被拉伸的图，或者黑边+留白——这不是裁剪，是遮罩失效。
容易踩的坑：
- 仅加
.rounded-circle，没设容器宽高一致 → 图片仍按原比例渲染，圆角只是“视觉错觉” - 加了
.rounded-circle还同时加.img-fluid→ 容器尺寸失控，overflow: hidden失效 - 期望移动端也完美裁剪，但忘了用
min-width/min-height或媒体查询适配小屏下的容器尺寸
后端裁剪前，前端坐标的缩放校准必须做
如果你用的是 Jcrop、Croppie.js 等前端裁剪库，它们返回的 x、y、w、h 是基于当前显示区域的像素值，不是原始图尺寸。而浏览器里图片很可能被 img-fluid 或响应式容器缩放过，导致坐标失真。
核心动作：拿到图片原始宽高（img.naturalWidth / img.naturalHeight），再除以当前显示宽高（img.offsetWidth / img.offsetHeight），算出缩放比，最后把裁剪坐标乘回去。
别跳过这步——否则用户选中间，后端裁出来可能是左上角一块。
示例关键逻辑：
const scale = img.naturalWidth / img.offsetWidth; const realX = Math.round(x * scale); const realY = Math.round(y * scale); const realW = Math.round(w * scale); const realH = Math.round(h * scale);
复杂点在于：有些图片带 EXIF 旋转信息（比如手机直拍的竖图），naturalWidth 和视觉方向可能不一致，这时候得先用 piexif.js 修正方向，再读尺寸。
