vertical-align是图片行内对齐的唯一可控方式，需显式设置top/middle/bottom；flex布局更可靠但需改结构；line-height和font-size会干扰对齐；object-fit控制图片内容对齐。
图片高度不一致时，vertical-align 是唯一可控的对齐入口
浏览器默认把 <img> 当作行内元素，基线对齐（baseline），所以大小不同的图会底部参差——这不是 bug，是规范行为。想让它们顶部/中部/底部对齐，必须显式设置 vertical-align，且只对行内或表格单元格生效。
-
vertical-align: top对齐容器上边缘（最常用） -
vertical-align: middle对齐父行高的中点，不是图片自身中点（容易误判） -
vertical-align: bottom对齐容器下边缘，比默认 baseline 更整齐 - 避免用
vertical-align: baseline（默认值），尤其当旁边有文字时，图片底部会和字母 x 的底边对齐，留出诡异空隙
Flex 布局更可靠，但得改 HTML 结构
如果允许把图片包进一个容器里，display: flex 是更现代、更可控的解法。它不依赖行内对齐逻辑，直接控制子项在交叉轴上的位置。
- 给父容器加
display: flex和align-items: flex-start（等价于vertical-align: top） - 若需等高拉伸，加
align-items: stretch，再配合height或min-height - 注意：
flex会让子元素脱离文本流，如果原布局依赖行内换行（比如纯靠空格/回车排图），需要补flex-wrap: wrap和宽度控制 - IE10+ 支持，但 IE10/11 对
align-items的部分取值有 bug，慎用center或baseline
line-height 和 font-size 会偷偷影响图片对齐
行内图片的对齐基准，和当前行的 line-height、font-size 强相关。哪怕没写文字，父容器若有字体设置，也会干扰 vertical-align: middle 的计算结果。
- 测试时先给父容器设
font-size: 0，看是否对齐变正常——如果变好了，说明是字体撑开的行高在捣鬼 - 恢复字体后，可改用
vertical-align: top避开干扰，而不是硬调middle - 不要给图片本身设
font-size，无效；也不要指望line-height能垂直居中图片，它只作用于行框，不是图片容器
响应式场景下，object-fit 和 aspect-ratio 才管图片内容对齐
上面说的都是“容器对齐”，如果图片本身被缩放后内容偏移（比如小图拉大后只显示左上角），那得靠 object-fit 控制内容裁剪/填充方式。
-
object-fit: cover保持比例裁剪，常配object-position: center居中取景 -
object-fit: contain完整显示，留白，此时对齐由vertical-align或align-items决定 -
aspect-ratio可强制容器维持宽高比（如aspect-ratio: 4/3），防止图片拉伸变形，但 Safari 15.4+ 才稳定支持 - 别用
width/height同时固定尺寸来“凑”对齐，会失真，且响应式断点一换就崩
真正麻烦的不是怎么对齐，而是对齐目标不明确：你要对齐的是图片容器边缘？还是图片内容中心？还是和旁边文字的某条线对齐？没想清这点，调十种 vertical-align 都像在蒙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
