只写 object-fit: cover 无法实现正方形效果，因为该属性仅控制图片在已有容器内的填充方式，不改变容器宽高比；必须配合 aspect-ratio: 1 / 1 等明确的 1:1 容器约束才能裁出正方形。
为什么只写 object-fit: cover 不出正方形效果
因为 object-fit 本身不定义容器形状，它只决定图片怎么“塞进”已有框里。如果父容器宽高不等（比如 width: 100%; height: auto），哪怕加了 cover，图片也会被拉伸或留白，根本裁不出正方形。
关键前提是：容器必须有明确的 1:1 宽高比约束。常见错误包括：
- 只给
img设object-fit: cover，但父div没设height或aspect-ratio - 用
max-width: 100%+height: auto，这会让高度随内容塌陷，浏览器无法计算裁剪基准 - 在富文本编辑器中直接插入图片，其外层容器默认无尺寸，
object-fit彻底失效
用 aspect-ratio: 1 / 1 配合 object-fit: cover 实现响应式正方形
这是现代浏览器下最干净的做法：容器靠 aspect-ratio 锁定比例，图片靠 object-fit 填满并裁剪。无需 JS，不依赖固定像素值。
实操要点：
- 给图片或其父容器设
width: 100%（支持响应式）和aspect-ratio: 1 / 1 -
img必须设width: 100%; height: 100%，否则object-fit无作用对象 - 加上
display: block防止img默认 inline 导致底部留白 - 不需要
overflow: hidden——cover自带裁剪行为，overflow是冗余
示例代码：
.square-img {
width: 100%;
aspect-ratio: 1 / 1;
}
.square-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
兼容老浏览器（如 IE）时怎么 fallback
aspect-ratio 和 object-fit 在 IE 中完全不支持。若必须兼容，得放弃 img 标签语义，改用 background-image 方案。
注意这不是“降级”，而是技术路径切换：
- 把图片设为容器的
background-image，而非<img>标签 - 用
background-size: cover+background-position: center模拟object-fit: cover - 容器仍需设
width和height（或padding-top: 100%hack）来撑开正方形 - 代价是：图片失去语义（SEO、无障碍、右键保存均失效）
不推荐在现代项目中主动用此方案，除非明确要求支持 IE11 及以下。
object-position 怎么调才能让重点不被切掉
正方形裁剪常把人脸顶部或产品 logo 切掉，这时不能只依赖默认的 center center。
object-position 必须和 object-fit: cover 同时存在才生效，且只影响裁剪焦点位置：
- 人像常用
object-position: center top（上移焦点，保留额头） - 底部带品牌标识的图，用
object-position: center bottom - 要微调到像素级？支持
object-position: 50px 80px，但注意该偏移基于缩放后图片坐标系，不是原始图 - 百分比值如
20% 30%表示“缩放后图片的横向 20%、纵向 30% 处对齐容器中心点”
别写 object-position: 50% 50%——它和 center center 完全等价，纯属多打字。
真正容易被忽略的是：aspect-ratio + object-fit 只改变渲染结果，原始图片文件毫发无损。如果后续需要导出裁剪区域、上传裁剪后图像，或做 canvas 截图，必须用 JS 手动计算缩放比例和裁剪坐标，CSS 做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
