小屏下头像挤压变形的核心原因是flex默认收缩行为与容器尺寸约束缺失共同导致；需同时关闭flex-shrink、锁定宽高比、统一响应式单位。
小屏下头像列表挤压变形，核心问题不是图片本身，而是 Flex 布局默认收缩行为 + 容器尺寸约束缺失的双重作用。关掉 flex-shrink、锁住宽高比、统一响应式单位，三者缺一不可。
为什么头像在 Flex 里会被压扁成小点
默认每个 Flex 子项都带 flex-shrink: 1，只要父容器总宽度不够，浏览器就会无视你写的 width: 64px，强行按比例压缩所有子项——头像这种尺寸敏感元素首当其冲。
- 单独写
width: 64px没用，它只是“参考值”，真正起效的是flex-basis -
flex-shrink: 0必须加在头像容器（如.avatar）上，而不是<img>标签本身 - 若父容器是
display: flex但没设align-items，<img>可能被align-items: stretch垂直撑开，此时flex-shrink: 0也救不了 - 旧版 Safari 会把
min-width: auto当作硬性下限，得额外加min-width: 0才真正释放
头像容器必须有明确宽高比，否则 object-fit 失效
object-fit: cover 不定义尺寸，只管“内容怎么填框”。如果容器高度由图片原始尺寸撑开，那它就不是固定盒子，object-fit 完全不工作。
- 推荐现代写法：
.avatar { width: 4rem; aspect-ratio: 1 / 1; }，配合.avatar img { width: 100%; height: 100%; object-fit: cover; } - 兼容 Safari 13.3 及更早版本：用
padding-bottom: 100%技巧，父容器position: relative，<img>设position: absolute - 别混用
max-width: 100%和height: 100%，前者让高度浮动，后者要固定框，冲突 - 确保
<img>是display: block，避免行内元素默认 baseline 对齐带来的底部空白
小屏错位/间距崩坏，根源是单位没对齐
头像尺寸、内边距、字体大小各自用 px / rem / %，媒体查询一缩，比例全乱。必须绑定到同一套相对单位，并用根字号统一调控。
- 基础层用
rem：.avatar { width: 4rem; height: 4rem; margin: 0.5rem; } - 在
@media (max-width: 768px)里统一改根字号：html { font-size: 14px; }（默认 16px），所有rem值自动收缩约 12.5% - 避免对头像单独写
max-width: 100%——它只控宽，高度可能变形；改用object-fit: cover配合固定宽高 - 若头像外层有卡片容器，记得给它加
overflow: hidden，否则裁切部分会溢出
最易被忽略的是：Flex 布局下，min-width: auto 这个隐性规则比 flex-shrink 更底层。很多人调了半天 flex-shrink: 0，却漏掉给头像容器加 min-width: 0，结果在窄屏下依然卡死不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
