如何让flex容器内所有图片匹配容器中最小图片的尺寸？

要让flex容器内的所有图片统一匹配最小图片的尺寸，无需改动display:flex属性，只需给图片容器和图片本身添加几条CSS规则即可：

1. 统一容器尺寸：给.imageBucket设置最小图片的宽高（200px × 134px），同时添加overflow: hidden防止图片超出容器范围；
2. 强制图片填充容器：给img元素设置width: 100%和height: 100%，让图片填满父容器；再用object-fit: cover控制图片显示——这个属性会保持图片比例并填满容器，超出部分自动裁剪，完美适配幻灯片的统一尺寸需求。

你之前用object-fit没生效，是因为没给图片设置宽高，它始终以原始尺寸渲染，object-fit自然无法发挥作用。

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.imageBucket {
  background-color:#19744e;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-right: 10px;
  padding: 5px;
  /* 统一为最小图片的尺寸 */
  width: 200px;
  height: 134px;
  overflow: hidden;
}
.container {
  justify-content:center;
  display: flex;
}
/* 让图片填满容器并保持比例 */
.imageBucket img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="imageBucket">
<img src="smallerImage.jpg">
</div>
<div class="imageBucket">
<img src="smallerImage.jpg">
</div>
<div class="imageBucket">
<img src="largerImage.jpg">
</div>
<div class="imageBucket">
<img src="smallerImage.jpg">
</div>
</div>
</body>
</html>

如果担心未来最小图片尺寸变化，也可以用JS动态获取最小图片的宽高后批量设置容器尺寸，但静态场景下直接写死宽高是最直接高效的方案。

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