应使用 object-fit 属性解决图片在 flex 容器中拉伸变形问题：object-fit: cover 保持宽高比裁剪显示，object-fit: contain 完整显示全图；需配合 width/height 约束尺寸才生效，align-self 不影响图像缩放。
图片在flex容器里被拉伸变形了怎么办
直接加 object-fit，不是改父容器的 flex 属性，也不是给图片设 width/height 百分比。flex 本身不控制子元素内部渲染逻辑，图片变形是 img 元素自身拉伸导致的，得从图像渲染层解决。
-
object-fit: cover最常用：保持宽高比裁剪显示，适合头像、卡片图 -
object-fit: contain适合需要完整看到全图的场景（比如图表预览） - 别用
object-fit: fill—— 它就是默认行为，会强制拉满导致变形 - 注意：IE 不支持
object-fit，如果必须兼容，得换background-image+background-size方案
align-self 能不能单独控制某张图片的缩放
不能。align-self 控制的是 flex 子项在交叉轴上的对齐位置（比如上下居中），不影响尺寸或内容渲染。给图片设 align-self: center 只会让它在 flex 容器里垂直居中，该变形还是变形。
- 常见误操作：给 img 加
align-self: stretch，结果图片被撑开——这是因为它默认占满交叉轴空间，但没配object-fit，所以内部图像被拉伸 - 真正起作用的是组合：先让 img 尺寸可控（比如设
width: 100%），再用object-fit管理图像填充方式 -
align-self和object-fit是两个维度的事：一个管“框在哪”，一个管“图怎么填进框”
为什么设置了 object-fit 还是没效果
大概率是图片没尺寸约束。object-fit 只在 img 有明确宽高（或被父容器限制出宽高）时才生效；否则浏览器按原始尺寸渲染，object-fit 无处下手。
- 检查是否漏了
width或height设置，哪怕只是width: 100% - flex 容器若没设
flex-shrink: 0，图片可能被压缩到极小，此时object-fit也难体现 - 别在 img 上同时设
max-width: 100%和width: 100%却忽略高度——这会导致宽高比失控，cover裁剪区域不可预期 - 用 devtools 检查 computed 样式，确认
object-fit生效且 img 的实际渲染宽高不为 auto
用 background-image 替代 img 标签是否更稳妥
在需要强兼容或复杂裁剪逻辑时，确实更可控。但代价是语义丢失、SEO 减分、无法响应式懒加载（除非手动处理）。
- 优势：
background-size: cover/contain行为稳定，IE8+ 都支持 - 注意点：得把图片路径写进 CSS，无法用
srcset做分辨率适配，也不能用loading="lazy" - 如果必须兼顾语义和兼容，可以双写：
img作为主结构 +object-fit，再用@supports not (object-fit: cover)回退到 background 方案 - 别为了省事把所有图都切 background —— 图片内容重要性高时（如文章配图），
img+object-fit仍是首选
真正容易被忽略的是：flex 容器的 min-width / min-height 默认值。如果父容器太小，图片即使设了 object-fit: cover，也会因容器挤压导致裁剪范围异常——这时候得回头调容器，而不是猛改图片样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
