如何用纯CSS实现图片等高、填满容器宽度且保持原比例？

需要创建满足以下要求的图片布局：

• 图片单行显示
• 保持各自宽高比，无变形
• 所有图片高度一致
• 共同填满父容器整个宽度，无空隙或溢出
• 图片及容器高度动态调整，使所有图片横向适配容器

额外要求：

• 容器占满可用水平空间
• img元素高度相同，宽度按比例调整以保持宽高比
• 图片高度动态确定，适配容器宽度

已尝试但无效的方案：

• 使用flex-grow和flex-shrink属性，导致图片高度不一致
• 设置容器固定高度，无法实现动态适配

示例HTML代码：

<div class="container">
  <img src="https://placehold.co/300x400">
  <img src="https://placehold.co/400x300">
  <img src="https://placehold.co/500x300">
</div>

纯CSS解决方案 #

核心思路是通过Flex布局 + 图片容器的flex比例匹配图片宽高比，让图片按自身比例分配容器宽度，同时保持统一高度，填满父容器。

步骤1：调整HTML结构（新增图片容器） #

给每个图片包裹独立容器，用于控制宽度分配比例：

<div class="container">
  <div class="img-wrapper" style="flex: 0.75">
    <img src="https://placehold.co/300x400">
  </div>
  <div class="img-wrapper" style="flex: 1.333">
    <img src="https://placehold.co/400x300">
  </div>
  <div class="img-wrapper" style="flex: 1.666">
    <img src="https://placehold.co/500x300">
  </div>
</div>

这里的flex值为图片的宽度/高度（即宽高比），Flex容器会按该比例为每个子容器分配宽度，确保所有容器高度一致。

步骤2：CSS样式实现 #

.container {
  display: flex;
  width: 100%; /* 占满可用水平空间 */
  height: auto; /* 高度随内容动态调整 */
  gap: 0; /* 移除图片间空隙，需要空隙可自行调整数值 */
}

.img-wrapper {
  height: auto;
  min-width: 0; /* 解决Flex子项宽度溢出问题，确保图片能完全适配分配空间 */
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持宽高比并填满容器，若需完整显示图片可改用object-fit: contain（可能出现空隙） */
}

优化维护方案（动态设置宽高比） #

若不想手动计算宽高比，可通过自定义属性或data属性批量设置：

<div class="container">
  <div class="img-wrapper" data-ratio="0.75">
    <img src="https://placehold.co/300x400">
  </div>
  <div class="img-wrapper" data-ratio="1.333">
    <img src="https://placehold.co/400x300">
  </div>
  <div class="img-wrapper" data-ratio="1.666">
    <img src="https://placehold.co/500x300">
  </div>
</div>

对应的CSS：

.container {
  display: flex;
  width: 100%;
  height: auto;
  gap: 0;
}

.img-wrapper {
  flex: var(--ratio);
  height: auto;
  min-width: 0;
}

.img-wrapper[data-ratio] {
  --ratio: attr(data-ratio);
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

内容的提问来源于Stack Exchange，提问作者Miki