应给<img>设max-width:100%和height:auto，并统一<td>的vertical-align:middle；用<picture>适配多分辨率，确保语义正确与可访问性。
用 <img> 嵌入 <td> 时图片撑破单元格怎么办
直接把 <img> 放进 <td>，默认会按原尺寸渲染，容易导致表格列宽失控、行高异常或响应式失效。关键不是“能不能放”，而是“怎么约束它”。
- 必须给
<img>设定max-width: 100%和height: auto，否则在窄屏或小单元格里会溢出 - 避免只设
width（比如width="80"），这会让图片在高分辨率屏上模糊，且无法随容器缩放 -
<td>自身别设固定width或min-width，改用table-layout: fixed+ 列宽百分比更可控
团队成员表格中头像对齐不一致的典型原因
常见现象是有的头像贴顶、有的居中、有的底部悬空——这不是 <img> 的问题，而是 <td> 的垂直对齐策略没显式声明。
- 默认
vertical-align: baseline，文字基线对齐会让图片底部和文字底边对齐，造成视觉偏移 - 统一加
vertical-align: middle到<td>或<img>才能真正居中 - 如果头像尺寸不一（比如有的 60×60，有的 40×40），仅靠
vertical-align不够，需配合display: flex或line-height控制行高
用 <picture> 替代 <img> 提升头像适配性
团队成员头像来源多样（裁剪比例不同、DPR 不同），硬塞同一张图进所有 <td> 容易拉伸变形或模糊。这时候 <picture> 比单个 <img> 更靠谱。
<td>
<picture>
<source media="(min-width: 768px)" srcset="avatar-2x.jpg 2x, avatar-1x.jpg 1x">
<img src="avatar-small.jpg" alt="张三" width="60" height="60">
</picture>
</td>
-
<source>按视口宽度或像素密度切换资源，避免移动端加载大图 -
<img>作为 fallback 必须保留，且要带width/height防止布局抖动 - 所有图片路径建议用相对路径，避免部署后 404；若头像来自 CDN，确保 URL 含版本号或哈希防止缓存旧图
表格语义与可访问性不能因排版妥协
为了“好看”把头像、姓名、职位全塞进一个 <td> 里，再用 CSS 拆成多行，会破坏屏幕阅读器对表格结构的理解。
立即学习“前端免费学习笔记（深入）”；
- 每个成员应占一行（
<tr>），姓名、职位、头像分属不同<td>或<th>，哪怕视觉上头像在左、文字在右 - 头像
<img>的alt必须描述人名+角色（如alt="李四，前端工程师"），不能写“头像”或留空 - 如果表格有排序、筛选等交互，不要用
display: none隐藏列，改用aria-hidden="true"+clip-path等不影响语义的方式隐藏
