圆角头像变形因宽高不等致裁切失真，需设正方形容器+border-radius:50%+object-fit:cover；Grid文字对不齐因未统一基线与行高，应设align-items:start及flex列布局+统一线高；响应式需clamp()同步缩放文字与头像；IE11需用背景图降级object-fit、媒体查询替代clamp()。
圆角头像用 border-radius 但图片变形？
直接设 border-radius: 50% 不一定出正圆，尤其当图片宽高不等时。浏览器会按盒模型裁切，不是按内容比例缩放。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保容器是正方形：给头像
width和height设相同值（比如80px），再加border-radius: 50% - 图片用
object-fit: cover，强制等比裁切填充，避免拉伸或留白 - 别依赖
img自带的宽高比——很多团队图是矩形原图，直接套用会压扁或拉长
img.team-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
CSS Grid 布局成员卡片时文字对不齐？
常见现象是头像高度一致了，但姓名、职位行高、margin 不统一，导致视觉“漂浮”。Grid 只管网格线，不管内部元素基线。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
align-items: start控制整行卡片顶部对齐，而不是默认的stretch - 姓名和职位用
display: flex; flex-direction: column+ 统一line-height（比如1.4），避免段落间距受字体大小干扰 - 别给
h3或p直接设margin-bottom——不同浏览器默认值不同，改用gap或padding
响应式下头像变小但文字没缩放，阅读困难？
很多人只 media query 头像尺寸，忘了文字也得适配。小屏上 16px 字在 48px 头像旁会显得突兀又难读。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
clamp()控制字号：比如font-size: clamp(14px, 4vw, 16px)，兼顾最小可读性和大屏表现 - 头像尺寸也用相对单位：
width: clamp(60px, 12vw, 80px)，和文字形成比例关系 - 别在移动端强行保持 3 列——用
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))更稳妥
IE11 兼容性问题：object-fit 和 clamp() 不生效
如果项目还要支持 IE11，object-fit: cover 会完全失效，clamp() 直接被忽略，回退成固定字号。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
object-fit降级方案：用背景图替代img，配合background-size: cover和background-position: center -
clamp()改用媒体查询分段写死，比如@media (max-width: 768px) { font-size: 14px; } - 别试图用 polyfill 补
object-fit——IE 下 JS 模拟性能差，且容易和 Grid 布局冲突
真正麻烦的不是怎么写圆角，而是所有成员图尺寸、格式、DPI 不统一。前端能控样式，控不了设计交付物。上线前最好拉张表格，把每张头像的原始宽高、文件大小、是否透明底都过一遍。
