用 实现基础头像框需设 alt（如 alt=”张三的头像”）、width/height 属性防布局偏移，并配合 border-radius: 50% 和 overflow: hidden 父容器确保圆角生效；非装饰性头像不可省略 alt，尺寸须等比，必要时用 Object-fit: cover 裁切。
怎么用 <img alt="html怎么创建用户头像框_HTML avatar结构教程【社交】" > 实现基础头像框
头像框本质是带边框、圆角和尺寸约束的图片容器，<img alt="HTML怎么创建用户头像框_HTML avatar结构教程【社交】" > 是最直接的选择。关键不是“怎么加”，而是“怎么不破环语义和可访问性”。
常见错误：只写 <img src="avatar.jpg" alt="HTML怎么创建用户头像框_HTML avatar结构教程【社交】" >，没设 alt，也没限制尺寸——结果在不同设备上拉伸变形，屏幕阅读器读不出是谁的头像。
-
alt必须写，哪怕只是alt="张三的头像"；空字符串alt=""仅适用于纯装饰性头像（极少见） - 用
width和height属性（非 CSS）能防止布局偏移（CLS），比如<img style="max-width:90%" style="max-width:90%" ... alt="HTML怎么创建用户头像框_HTML avatar结构教程【社交】" > - 圆角靠 CSS 的
border-radius: 50%，但必须确保宽高等比，否则会变椭圆
CSS 中 border-radius 为什么有时不生效
表面是圆角问题，根因常是图片没加载完成、父容器溢出隐藏没关，或宽高不一致。
典型现象：本地预览是圆的，上线后变成方的；或者小图圆、大图方。
立即学习“前端免费学习笔记（深入）”；
- 检查是否用了
object-fit: cover却没配width/height—— 容器尺寸不定时，border-radius会失效 - 父元素有
overflow: hidden是必须的，否则圆角会被裁掉（尤其在 flex 或 grid 布局里容易漏） - 如果头像来自用户上传，原始图可能是长图，得靠
object-fit: cover+ 固定宽高来强制裁切，不能只靠border-radius
要不要用 <picture></picture> 或 srcset 做头像响应式
大多数场景不需要。头像尺寸固定（如 40px、48px、96px），且通常走 CDN 缓存，分辨率适配优先级很低。
真要用，也只在两种情况值得考虑：高 DPR 设备（如 Retina 屏）显示模糊，或头像要支持深色模式自动切换（需 <picture></picture> + media）。
- 普通头像用
srcset加一个@2x版本就够了，例如：srcset="avatar.jpg, avatar@2x.jpg 2x" - 避免为每个尺寸都写
srcset，头像不是 banner 图，没必要做多断点 -
<picture></picture>增加 dom 复杂度，除非你真需要根据配色主题切换头像（比如深色模式下用浅色底图标），否则纯属过度设计
用 <svg></svg> 或字母头像时，viewBox 和尺寸怎么配
字母头像或图标头像常用内联 <svg></svg>，但很多人直接复制粘贴代码，结果大小失控或居中偏移。
错误示范：<svg width="48" height="48"><text x="24" y="24">A</text></svg> —— 文字不会垂直居中，因为 SVG 的 y 是基线位置，不是中心。
- 必须设
viewBox="0 0 48 48"，再用width/height控制实际尺寸，这样缩放才不失真 - 文字垂直居中用
dominant-baseline="middle" text-anchor="middle"，配合x="24" y="24" - 如果嵌在 flex 容器里，记得给
<svg></svg>加flex-shrink: 0，否则可能被压缩变形
头像看着简单，但跨设备、跨状态（加载中/失败/无图）、跨主题（亮色/暗色）时，DOM 结构和属性组合稍有偏差，就会在某个角落崩一下。别信“套个 class 就行”，得一个个条件对齐。