border-radius: 50% 不总能生成正圆图片是因为只有当元素宽高相等时才形成正圆；若原图或容器为矩形，则呈现椭圆角矩形，需配合 aspect-ratio: 1/1 或 padding-top: 100% 确保等比容器，并用 object-fit: cover 配合避免拉伸或留白。
为什么 border-radius: 50% 不总能生成正圆图片
直接给 <img> 加 border-radius: 50% 只有在宽高相等时才真正是圆；如果原图是矩形（比如 800×600），它只会变成「椭圆角矩形」，视觉上仍是扁的。关键不是加样式，而是先确保容器或图片本身满足等宽高等比约束。
- 最稳妥方式：用
aspect-ratio: 1 / 1强制容器保持正方形比例（现代浏览器支持，Chrome 88+、Firefox 89+） - 兼容老浏览器？改用
padding-top: 100%+position: relative/absolute技巧模拟正方形容器 - 别依赖图片原始尺寸——
<img width="200" height="200">比只设width: 200px更可靠，避免 CSS 覆盖后失比
用 object-fit 控制图片填充方式
border-radius 只裁剪容器轮廓，不处理内部图片溢出。若图片比例和容器不一致，会出现留白或拉伸。必须配合 object-fit：
-
object-fit: cover—— 推荐。等比缩放并裁剪，确保填满且无变形，适合头像类场景 -
object-fit: contain—— 保留完整图片，但可能有白边，不适合「剪裁」需求 - 别用
object-fit: fill—— 会强行拉伸，破坏人脸/主体比例 - 注意：IE 完全不支持
object-fit，需降级为 background-image 方案（见下一条）
IE 兼容方案：用 background-image + background-size
当必须支持 IE11 或更早版本时，<img> 标签的 object-fit 和 aspect-ratio 都不可用，得换思路：
- 把图片设为父容器的
background-image，用background-size: cover实现等比裁剪 - 父容器设
border-radius: 50%，再用padding-top: 100%维持正方形（避免设置 height 导致响应式失效） - HTML 结构示例：
<div class="avatar" style="background-image: url('photo.jpg');"></div>，对应 CSS 中定义宽高、圆角和背景行为 - 缺点：图片无法被搜索引擎索引，也丢失了
alt文本语义——仅限纯装饰性头像
编辑器中快速应用的实用技巧
在 VS Code、WebStorm 或在线编辑器（如 CodePen）里批量处理图片圆角，别手动敲每一条规则：
立即学习“前端免费学习笔记（深入）”；
- VS Code 用户可建代码片段（snippet），触发词如
circleimg，展开为带aspect-ratio、object-fit和border-radius的完整结构 - 用 PostCSS 插件（如
postcss-aspect-ratio）自动补全老浏览器 fallback，减少手写 hack - 警惕编辑器实时预览偏差：某些编辑器内联样式未生效或缓存旧 CSS，务必在真实浏览器中验证
computed style中的border-radius是否为50%且生效
border-radius: 50%，却没意识到图片父元素本身是长方形，结果剪出来还是个“胖圆”。真要快，就从约束容器开始。 
