如何用CSS实现等高并排显示两张图片并满足特定约束

我想用CSS实现两张图片并排显示，需满足以下约束条件：

• 两张图片必须高度相同（等高的标准是什么？）
• 两张图片的总宽度需等于容器的总宽度（若需拉伸，如何分配图片宽度？）
• 必须保持两张图片的宽高比
  但图片和容器的尺寸无法预先得知，以下是部分图片组合示例及预期效果：
  

核心思路 #

1. 等高标准：让两张图片最终显示高度完全一致，借助CSS布局特性强制统一容器内图片的高度基准。
2. 宽度分配：根据图片原始宽高比自动计算各自的宽度占比，确保总宽度恰好填满容器，无需预先设定固定比例。
3. 宽高比保持：通过CSS属性保证图片缩放时不扭曲，严格遵循原始比例。

纯CSS实现代码 #

基础样式（无间隙，完整显示图片） #

.image-container {
  display: grid;
  grid-template-columns: auto auto;
  width: 100%;
  gap: 0; /* 若需要图片间的间隙，可改为具体数值如8px */
}

.image-container img {
  height: 100%;
  width: 100%;
  object-fit: contain; /* 完整显示图片，无裁剪 */
}

可选调整（填充容器，允许裁剪） #

如果希望图片填满各自区域、容器无空白，可修改object-fit属性：

.image-container img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* 填充容器，裁剪超出部分 */
  object-position: center; /* 裁剪时优先保留图片中心区域 */
}

方案说明 #

• 等高实现：CSS Grid会自动统一同一行内所有单元格的高度，图片设置height: 100%后会完全填充单元格高度，因此两张图片的显示高度完全一致。
• 宽度分配：grid-template-columns: auto auto会根据两张图片的原始宽高比，自动分配容器宽度的占比，最终总宽度恰好填满容器，适配任意尺寸的图片和容器。
• 宽高比保持：object-fit: contain确保图片按原始比例缩放，不会出现拉伸变形；若选择cover则会让图片填满单元格，同时保持比例，仅裁剪超出容器的部分。

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