用 flex 布局最可靠：父容器设 display: flex 且 align-items: flex-start，图片设 max-width: 100% 和 height: auto；兼容 ie 时用 font-size: 0 + inline-block + vertical-align: top 并删除标签间空格。
两张图片怎么对齐显示（HTML 布局基础）
浏览器默认把 <img alt="html两张图片如何让两张图片对应" > 当作行内元素，直接并排写两个 <img alt="html两张图片如何让两张图片对应" > 标签，它们会像文字一样从左到右排列——但只要中间有空格、换行或文本节点，就会产生间隙；加上图片默认基线对齐（vertical-align: baseline），底下留白，看起来就“错位”了。
- 确保两图紧挨着写，中间不要换行或空格：
<img src="a.jpg" alt="html两张图片如何让两张图片对应" ><img src="b.jpg" alt="html两张图片如何让两张图片对应" > - 给图片加
vertical-align: top或middle，消除基线对齐导致的底部空白 - 更稳妥的做法是统一设为块级 + 水平排列：
display: block配合float: left，或直接用display: flex容器
用 Flex 布局让两张图片严格对齐（现代推荐方案）
Flex 是目前最可控、语义最清晰的方式，尤其适合“并排、等高、居中、响应式”这类需求。父容器设 display: flex 后，子 <img alt="html两张图片如何让两张图片对应" > 会自动按主轴排列，高度自动拉齐，不用手动算 margin 或 line-height。
- 父容器加
display: flex，两图自然左对齐并排 - 加
align-items: flex-start防止图片被拉伸（默认是stretch） - 如果要居中对齐，用
justify-content: center - 图片本身建议设
max-width: 100%和height: auto，避免溢出容器
<div style="display: flex; align-items: flex-start;"> @@##@@ @@##@@ </div>
图片尺寸不一致时怎么视觉对齐（宽高差异处理）
现实中两张图往往宽高比不同，强行设相同 width 或 height 会导致变形。真要“对应”，得明确你指哪一种对齐：
- 若想顶部对齐：父容器
align-items: flex-start（Flex 下默认就是） - 若想底部对齐：用
align-items: flex-end - 若想等高且裁剪显示：给图片容器设固定高，
object-fit: cover - 若想等比例缩放但保持各自宽高比：不设固定高，只设
max-width，靠 Flex 自动对齐顶部
常见错误是给 <img src="a.jpg" style="max-width:90%" alt="html两张图片如何让两张图片对应" > 直接设 height: 200px，结果一张图被压扁，另一张被拉长——除非你确定它们原始比例一致，否则别碰 height 固定值。
立即学习“前端免费学习笔记（深入）”；
IE 兼容场景下怎么安全对齐（老浏览器兜底）
IE10–11 对 Flex 支持有限（比如不支持 flex-wrap、某些 align-items 值异常），如果必须兼容，优先退回 display: inline-block 方案：
- 父容器清除字体大小影响：
font-size: 0 - 图片设
display: inline-block+vertical-align: top - 图片自身恢复字体大小（如需文字说明）可单独设回
font-size: 16px
<div style="font-size: 0;"> @@##@@ @@##@@ </div>
注意：IE 下 inline-block 仍可能因 HTML 换行产生 4px 左右间隙，所以务必删掉标签间的空格或换行，或者用注释“消除”：<img src="b.jpg" style="max-width:90%" alt="html两张图片如何让两张图片对应" ><!-- --><img alt="html两张图片如何让两张图片对应" >。
两张图片是否“对应”，本质是你想对齐什么：位置？尺寸？语义关系？布局只是手段，关键先想清楚“对应”在你的场景里到底指什么——比如是不是其实该用 <figure></figure> + <figcaption></figcaption> 来表达图文关联，而不是单纯排版。
