多张响应式图片等高排列本质是每行内图片顶部对齐、底部不参差，靠align-items: start（grid）或flex-start（flex）实现，而非强制设height；grid用auto-fit+minmax控制列数，flex需加min-width: 0防收缩。
多张响应式图片等高排列，本质不是“把所有图片拉成一样高”，而是让每行内的图片在保持自身宽高比的前提下，视觉上顶部对齐、底部不参差——这靠 align-items: start（Grid）或 align-items: flex-start（Flex），而不是强制设 height。
用 Grid 实现等高行内对齐
Grid 是目前最可控的方案，尤其适合明确列数或最小宽度约束的场景。关键不是让图片本身等高，而是让它们所在网格项（grid item）在行方向上统一基线。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))控制列数自动适应，每列最小 250px -
align-items: start必须加在容器上，否则默认stretch会拉伸图片高度、破坏比例 -
img只需width: 100%; height: auto;，不设固定高；若父容器有固定高（如height: 200px），才用object-fit: cover+height: 100% - 别用
vertical-align—— 它对 Grid item 无效
用 Flex 实现等高行内对齐
Flex 更适合图数不固定、需要自动换行的相册类布局。它天然支持行内对齐控制，但容易踩 min-width 坑。
- 容器设
display: flex; flex-wrap: wrap; align-items: flex-start; - 每个图片包裹容器（如
<figure></figure>）设flex: 1; max-width: 100%; min-width: 0;——min-width: 0是关键，否则大图会阻止收缩，导致横向滚动条 -
img保持width: 100%; height: auto;，避免拉伸；若需裁剪，用object-fit: cover配合显式容器高 - 别漏
gap：用gap: 12px替代margin，不会干扰 flex 计算
为什么不能直接设 height: 200px
硬设 height 会破坏响应式前提：图片原始宽高比不同，强行统一高度必然导致部分图片被拉伸、压缩或留白。浏览器无法自动补偿比例差异。
- 设
height: 200px+width: auto→ 小图被放大模糊，大图被压缩变形 - 设
height: 200px+object-fit: cover→ 图片被裁剪，关键内容可能丢失 - 设
height: 200px+object-fit: contain→ 留白不可控，底部不对齐问题照旧 - 真正可靠的等高，是靠容器布局机制（Grid/Flex 的对齐属性）控制视觉起点，而非像素级拉高
兼容性与降级处理
IE11 不支持 Grid 和 Flex 的现代对齐属性，如果必须兼容，inline-block 是唯一可行路径，但代价是手动清除空白符间隙。
- 容器设
font-size: 0;，子项设font-size: 16px;消除 HTML 换行符产生的间隙 - 每个图片包裹容器设
display: inline-block; vertical-align: top;——vertical-align: top是实现“等高”视觉的关键 - 图片仍需
width: 100%; height: auto;，不能依赖父容器高度撑开 - 此方案无法响应式折行（除非配合媒体查询），且
vertical-align对父容器高度无感知，仅对行内基线起作用
等高排列最容易被忽略的点，其实是“对齐目标”的混淆：你要对齐的是图片内容区域的顶部，还是容器的顶部？前者靠 align-items: start 或 vertical-align: top，后者靠 margin-top: 0 —— 但后者不解决行内参差。实际项目中，90% 的错位问题，都出在漏了 min-width: 0 或误用了 height 覆盖原生比例。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
