图片行高错乱源于原始宽高比不一，需统一视觉对齐而非强制等大：删HTML宽高属性，设max-width:100%;height:auto;display:block；固定区域用aspect-ratio+object-fit；Flex/Grid中加align-items:start、min-width:0、vertical-align:top或display:block；图文混排须用figure包裹并设inline-block/flex布局。
图片原始尺寸不一致导致行高错乱
多图并排时出现“有的高、有的矮”，不是 CSS 没写对，而是每张图原始宽高比不同，而你又没统一它们的展示逻辑。浏览器默认按原始尺寸渲染 <img>，一旦父容器高度固定或 flex 布局自动对齐，差异就会被放大成错行、留白、裁切甚至横向滚动条。
关键不是“让图变一样大”，而是“让图在视觉上对齐且不失真”。实操建议如下：
- 删掉所有 HTML 中的
width和height属性（如width="600" height="400"），它们会强制拉伸，是比例失真的根源 - 给
<img>设max-width: 100%; height: auto; display: block;—— 这是内容型图片保比例的基础组合 - 若需填满固定区域（如卡片封面），则必须给父容器设尺寸或
aspect-ratio，再配object-fit: cover或contain，不能只写object-fit却不控制容器大小 - 用
aspect-ratio: 4 / 3;直接声明宽高比，现代浏览器支持良好；旧版 Safari 需 fallback：height: 0; padding-top: 75%;+position: absolute;子图
Flex 布局下图片忽高忽低、底部不对齐
设了 display: flex 却发现图片底部参差不齐，常见原因是没处理好 align-items 和图片自身行为。Flex item 默认按 align-items: stretch 拉伸，但 <img> 是替换元素，其“自然高度”受原始尺寸和 CSS 控制双重影响。
避免错位的核心动作：
立即学习“前端免费学习笔记（深入）”；
- 容器加
align-items: start;（不是flex-start，二者等价但语义更准），防止图片被拉高 - 每张图的父容器（如
<figure>或<div class="card">）设min-width: 0;—— Flex item 默认min-width: auto，窄屏下拒绝缩小，导致换行异常或横向溢出 - 图片本身加
vertical-align: top;或直接display: block;，消除 inline 元素自带的基线对齐空白 - 别依赖
height: 100%去撑满父容器，除非你已明确父容器有高度（比如设了height: 200px或aspect-ratio）
Grid 布局中列宽一致但图片高度仍不齐
用了 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，列数响应式没问题，但每行图片高度还是不一致——这说明问题不在 Grid 列轨道，而在图片自身渲染逻辑。
Grid 本身不控制子项内部高度，它只分配空间。要让“列宽一致 + 图片高度视觉一致”，得配合以下设置：
- 图片设
width: 100%; height: 100%; object-fit: cover;，前提是其父容器（即 grid cell）有明确高度约束，比如设了aspect-ratio或固定height - Grid 容器加
align-items: start;，避免默认stretch把图片拉高 - 如果想让所有图片“完整显示+等高”，改用
object-fit: contain;并确保父容器高度统一（例如所有<figure>设min-height: 200px;） - 慎用
height: auto在 grid cell 内：它会让单元格高度随图片原始尺寸浮动，破坏网格节奏
带图说（<figcaption>）时文字和图错位
<figcaption> 是块级元素，如果和 <img> 平铺在同一个父容器里（如直接写 <img><figcaption>），它会强制独占一行，导致图文分离、错行严重。
正确结构必须是：
- 每组图+文单独包进一个
<figure>（语义正确）或<div class="card">（灵活性高） - 这个包裹容器设
display: inline-block;或display: flex;，再由外层统一控制排列方式 - 若用
inline-block，外层容器必须加font-size: 0;消除 HTML 换行符产生的间隙，子容器内再设回正常字号 -
<figcaption>默认左对齐、无 margin，记得加text-align: center;和margin-top: 0.5em;等样式
最易被忽略的是：<figure> 本身没有默认 margin，如果不手动加，多组图说之间会紧贴，缺乏呼吸感。
