直接用 rounded 和 img-fluid 不行，因为 img-fluid 仅使宽度自适应、高度随动，不维持宽高比；rounded 作用于图片自身，原始比例非1:1时圆角会变形。正确方案是容器设 aspect-ratio: 1/1 + overflow-hidden + rounded，图片用 object-fit: cover 居中裁剪。
为什么直接用 rounded 和 img-fluid 不行
因为 img-fluid 只控制宽度自适应、高度随动，不保证宽高比；rounded 作用于图片自身，但若图片原始比例不是1:1，圆角会出现在拉伸/压缩后的矩形上，视觉上仍是“歪的圆角”。真正要的是容器维持正方形 + 图片居中裁剪 + 圆角套在容器上。
用 aspect-ratio: 1 / 1 配合 overflow: hidden
现代浏览器（Chrome 103+、Firefox 110+、Safari 16.4+）支持 aspect-ratio，这是最干净的方案。关键点是：圆角加在容器上，图片用 object-fit: cover 居中裁剪。
<div class="col">
<div class="rounded-3 overflow-hidden" style="aspect-ratio: 1 / 1;">
<img src="photo.jpg" class="w-100 h-100 object-fit-cover">
</div>
</div>
-
rounded-3加在父容器（不是<img>），确保圆角包裹整个正方形区域 -
overflow-hidden必须加，否则裁剪失效 -
w-100 h-100让图片撑满容器，object-fit-cover保证等比缩放+居中裁剪 - Bootstrap 5.3+ 才内置
object-fit-cover，旧版本需手动加 CSS：object-fit: cover;
兼容老浏览器：用 padding-top: 100% 伪元素方案
IE 和旧版 Safari 不支持 aspect-ratio，得用经典 padding hack。核心是把图片作为背景图或绝对定位子元素，靠父容器内边距撑出正方形。
<div class="col">
<div class="position-relative rounded-3 overflow-hidden" style="width: 100%;">
<div style="padding-top: 100%; background-image: url('photo.jpg'); background-size: cover; background-position: center;"></div>
</div>
</div>
- 外层
position-relative提供定位上下文，rounded-3和overflow-hidden仍加在外层 - 内层
div用padding-top: 100%实现 1:1 宽高比，无内容时高度由 padding 决定 - 背景图方式避免了
<img>的语义和加载问题，但无法设置alt文本 - 若必须用
<img>标签，可改用绝对定位：position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
别漏掉响应式断点下的行为差异
col 在不同断点下宽度变化，但 aspect-ratio 或 padding-top 是相对父容器宽度计算的，所以正方形会随列宽缩放——这通常是期望行为。但要注意：
- 如果父容器（如
.row）有gutter，实际可用宽度小于 100%，可能导致正方形略窄；可加mx-n3抵消（对应g-3） - 小屏下图片可能过小，建议配合
min-width限制最小尺寸，比如min-width: 80px; -
rounded-3的圆角半径是固定值（0.5rem），在极小尺寸下会显得过大，必要时用rounded-1或媒体查询覆盖
实际项目里，多数情况用 aspect-ratio 方案就够了；真要兼容 IE，就切到背景图 + padding hack。圆角永远套容器，图片永远走裁剪，这两条绕不开。
