最可靠方案是用 object-fit: cover 配合固定宽高比容器（如 Bootstrap 5.3+ 的 ratio-1x1），需确保父容器有明确宽高约束且 display: block，避免 img-fluid 与 h-100 冲突。
用 object-fit + 固定宽高比容器最可靠
Bootstrap 本身不提供“强制正方形图片”的内置类，靠 img-fluid 或 rounded 都不能解决比例问题。真正可控的方式是组合 CSS 的 aspect-ratio: 1 / 1（现代浏览器）或伪元素 padding-bottom hack（兼容旧版），再配合 object-fit: cover 裁剪填充。
- 别直接给
<img>设width: 100%; height: 100%—— 会拉伸变形 - 容器必须有明确宽高约束（比如
col-4或max-width: 200px），否则aspect-ratio无效 - Bootstrap 5.3+ 支持
aspect-ratio，但 IE 完全不支持；若需兼容 IE，改用 padding-bottom 方案
aspect-ratio 在 Bootstrap 5 中的写法示例
这是目前最简洁的做法，适用于大多数新项目：
<div class="ratio ratio-1x1"> <img src="photo.jpg" class="w-100 h-100 object-cover"> </div>
注意：ratio-1x1 是 Bootstrap 5.3+ 内置类，它等价于 aspect-ratio: 1 / 1；object-cover 是 Bootstrap 5.2+ 新增的工具类，对应 object-fit: cover。如果用的是 5.1 或更早版本，需手动加 CSS：
.square-img-container {
aspect-ratio: 1 / 1;
}
.square-img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}遇到 object-fit 不生效？检查这三点
常见失效不是代码写错，而是被其他样式覆盖或条件缺失：
-
img父容器没设display: block或存在默认vertical-align: baseline，导致底部留白 → 加class="d-block" - 图片本身尺寸远小于容器，
object-fit: cover会放大模糊 → 换更高清源图，或改用object-fit: contain（但会留白） - Bootstrap 的
img-fluid含max-width: 100%和height: auto，与h-100冲突 → 不要同时用img-fluid和h-100
响应式正方形：不同断点下保持 1:1
如果需要在 sm 下是 1:1、lg 下变成 4:3，不能只靠一个 ratio-1x1。得用媒体查询或 Bootstrap 的响应式比率类（5.3+）：
<div class="ratio ratio-1x1 ratio-lg-4x3"> <img src="photo.jpg" class="w-100 h-100 object-cover"> </div>
这个写法依赖 Bootstrap 5.3 的响应式 ratio 工具类；若用老版本，只能手写媒体查询：
@media (min-width: 992px) {
.responsive-square::before {
padding-bottom: 75%; /* 4:3 */
}
}
@media (max-width: 991px) {
.responsive-square::before {
padding-bottom: 100%; /* 1:1 */
}
}实际项目里，最容易被忽略的是图片加载前的容器塌陷问题 —— 建议始终为容器设置最小高度（如 min-height: 100px）或使用 loading="lazy" 配合占位背景色。
