如何用CSS调整图片尺寸实现一行内完美匹配？

嘿，这个需求完全可以用纯CSS搞定，根本不需要JavaScript！我给你分享两个实用的方案，你可以根据自己的布局场景来选：

方案一：Flexbox + Object-Fit（最常用的灵活布局） #

首先是HTML结构，很简单，用一个容器包裹三张图片：

<div class="image-container">
  <img src="your-image-1.jpg" alt="描述图片1">
  <img src="your-image-2.jpg" alt="描述图片2">
  <img src="your-image-3.jpg" alt="描述图片3">
</div>

然后是核心CSS：

.image-container {
  display: flex;
  gap: 10px; /* 可选：给图片之间加些间距，让布局更美观 */
}

.image-container img {
  flex: 1; /* 让每张图片平分容器的可用宽度，实现等宽 */
  height: 280px; /* 固定高度，确保所有图片高度一致 */
  object-fit: cover; /* 按比例缩放图片，裁剪超出容器的部分，保证图片内容完整不拉伸 */
  /* 如果你不想裁剪图片，想要完整显示（可能会有留白），可以换成 object-fit: contain */
}

这个方案的好处是flex布局非常灵活，哪怕后续要调整图片数量，修改起来也很方便。

方案二：Grid布局（规整的网格式布局） #

如果你更喜欢规整的网格结构，Grid也是个好选择，HTML结构和上面一样，CSS改成这样：

.image-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 直接定义三列，每列宽度均等 */
  gap: 10px;
}

.image-container img {
  height: 280px;
  object-fit: cover;
  width: 100%; /* 确保图片占满网格单元格的宽度 */
}

Grid布局天生适合这种等分的列布局，代码更直观。

进阶技巧：自适应高度（不用固定height） #

如果你不想固定图片高度，想让它们按比例自适应，可以用aspect-ratio属性来控制宽高比，比如改成这样：

.image-container img {
  flex: 1; /* 或在Grid里用width: 100% */
  aspect-ratio: 16/9; /* 设置你需要的宽高比，比如16:9、4:3都可以 */
  object-fit: cover;
}

这样图片会自动根据宽度计算高度，保持统一的比例，同时占满分配的空间。

总结一下：这两个方案都是纯CSS实现，完全不需要借助JavaScript，兼容性在现代浏览器里也没问题。object-fit是关键，它能帮你处理不同尺寸图片的缩放和裁剪，避免图片拉伸变形，让三张图片在相等的空间里完美匹配。

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