用object-fit: cover最快实现图片正方形裁剪：容器设固定宽高+overflow-hidden，图片设width:100%;height:100%;object-fit:cover；ie不支持，可用background-image+background-size:cover替代。
用 object-fit 最快实现图片裁剪为正方形
直接给图片容器设固定宽高 + object-fit: cover，就能让图片居中裁剪填满正方形区域，不拉伸、不变形。这是现代浏览器最省事的做法。
常见错误是只设了 width 和 height，但没加 object-fit，结果图片被强行拉成方块、五官扭曲。
- 容器必须有明确的宽高（比如
width: 200px; height: 200px;） -
img标签本身不能设width/height行内样式，否则会覆盖object-fit行为 - 兼容性：Chrome 32+、Firefox 36+、Safari 9.1+、Edge 16+，IE 完全不支持
<div style="width: 200px; height: 200px; overflow: hidden;"> @@##@@ </div>
IE 兼容方案：用 background-image + background-size: cover
IE11 及更早版本不认 object-fit，但支持 background-size: cover。把图片当背景图处理，反而更稳。
注意这不是“替换图片”，而是用 CSS 把图片塞进容器背景里——所以语义上会丢失 alt 文本，SEO 和可访问性有折损。
- 必须用
div等块级元素，img标签无法设置背景图 -
background-size: cover保证等比缩放并裁剪填满；background-position: center防止偏移 - 如果原图太小，会被拉伸模糊，建议源图至少 400×400 像素
<div style="width: 200px; height: 200px; background: url('photo.jpg') center/cover no-repeat;"></div>
需要保留 img 语义时：用 clip-path 硬裁（慎用）
想继续用 img 标签、又要兼容旧浏览器？clip-path 能按坐标裁出正方形，但它是“视觉裁剪”——图片数据还在，只是看不见边缘部分。
问题很实际：Chrome 支持 clip-path: inset()，但 Safari 对百分比参数支持不稳定，Firefox 则要求加 -webkit- 前缀才能生效。
- 推荐写法：
clip-path: inset(0 0 0 0 round 0)配合aspect-ratio: 1 / 1控制比例 - 真正裁掉像素得靠后端或 Canvas，CSS 做不到
- 性能影响小，但调试困难——裁哪了、为啥偏了，得靠 DevTools 反复调
inset四个值
别忽略响应式场景下的陷阱
所谓“正方形”，在移动端横屏、折叠屏、Zoom 缩放下可能瞬间变形。单纯设 width: 100%; height: 100% 在 flex 或 grid 容器里常失效。
- 优先用
aspect-ratio: 1 / 1（Chrome 88+、Firefox 89+、Safari 15.4+），它比 JS 计算或伪元素更可靠 - 老浏览器 fallback：用
::before伪元素 + padding-top: 100% 实现固宽比容器 - 如果图片来自 CMS 或用户上传，尺寸不可控，务必在服务端预生成正方形缩略图——CSS 裁剪解决不了带宽和加载速度问题
裁剪不是目的，确保关键内容（比如人脸）始终在可视区中央，才是难点。这往往需要结合 object-position 手动微调，而不是依赖默认居中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
