如何在HTML中实现两张不同尺寸图片并排显示且高度一致

问题根源 #

你当前的代码存在两个核心问题导致高度无法统一：

• 你给img设置了width: 100%，图片宽度会跟随外层column容器自适应，高度会按原始宽高比自动计算，两张图原始比例不同自然高度不一致
• 缺少针对图片的统一高度约束，以及避免图片拉伸变形的属性配置

解决方法 #

第一步：修改CSS样式 #

新增图片高度规则，调整flex对齐逻辑：

.column {
  padding: 5px;
}
.row {
  display: flex;
  justify-content: center;
  align-items: center; /* 保证列容器垂直对齐，避免错位 */
}
.row img {
  height: 300px; /* 此处可替换为你需要的统一高度数值 */
  width: auto; /* 宽度自适应，保持图片原始比例不变形 */
  /* 如果需要图片固定在容器内不超出，可额外加object-fit: contain; */
}

第二步：修改HTML代码 #

删掉img标签上的style="width: 100%"行内样式，避免覆盖CSS配置：

<div class="row">
    <div class="column">
        <img src="image1.jpg" alt="climbing a mountain" />
    </div>
    <div class="column">
        <img src="image2.jpg" alt="climbing a metal tree" />
    </div>
</div>

可选适配方案 #

如果需要高度自适应父容器而非固定数值，可给.row设置固定高度，再把img的height属性改为100%即可。

内容的提问来源于stack exchange，提问作者Amitai