直接给加border-radius: 50%不能单独出真圆，必须同时满足宽高相等（如width: 80px; height: 80px）、object-fit: cover防拉伸、现代浏览器默认裁剪生效；宽高不等则必为椭圆。
直接给 <img> 加 border-radius: 50% 就能出真圆，但必须同时满足：宽高相等、值为固定像素（如 120px）、且图片原始比例不是严重长图——否则会变椭圆或裁不全。
为什么写了 border-radius: 50% 图片还是方的？
不是 CSS 失效，是浏览器按盒模型分别计算水平和垂直方向的圆角半径。如果 width 和 height 不相等（比如 width: 200px; height: 150px;），那 50% 就变成 100px 和 75px，结果必然是椭圆。
- 只设
width: 100%+height: auto：高度不锁定，border-radius: 50%无效 - 用
aspect-ratio: 1 / 1：现代浏览器支持良好，但 Safari 15.4 以下不支持 - 旧环境（如 Gmail、Outlook Web）可能忽略
object-fit，这时唯一稳的办法是提前把图片处理成正方形再引用
要不要套一层 <div> 容器？
<p>多数情况不用——现代浏览器对 <code><img> 元素默认裁剪内容，直接加样式更轻量、语义清晰。
- 推荐写法：
<img src="a.jpg" style="max-width:90%">
- 必须套容器的场景：要兼容 IE9–；父容器用了
transform 或 will-change（某些旧版 Chrome 下 overflow: hidden 可能失效）；或需统一控制多个子元素（如图标+文字）
- 套容器时务必加
overflow: hidden，否则圆角只是“画了个圈”，图片照样溢出
object-fit: cover 和 contain 怎么选？
<img src="a.jpg" style="max-width:90%">
transform 或 will-change（某些旧版 Chrome 下 overflow: hidden 可能失效）；或需统一控制多个子元素（如图标+文字）overflow: hidden，否则圆角只是“画了个圈”，图片照样溢出object-fit: cover 和 contain 怎么选？这是决定头像是否被裁剪的关键参数，不是可有可无的装饰。
-
object-fit: cover：图片等比缩放并居中裁切填满容器，适合头像——确保脸在中央，但可能切掉头顶或肩膀 -
object-fit: contain：图片等比缩放并完整显示，留白不可避免，适合需要保留全部内容的场景（如证件照预览） - 若图片本身带透明背景（如 PNG），
cover下边缘可能出现半透灰边，此时可加background: #fff防透底
最容易被忽略的一点：圆角本身不占空间，但一旦加了 border 或 box-shadow，若没设 box-sizing: border-box，容器实际尺寸会撑大，导致布局错位——尤其在 flex/grid 布局里容易踩坑。
