CSS图片宽度问题：三张图片无法同行显示的解决求助

当前你遇到的情况是：第一张图片原始尺寸过大，导致flex容器触发flex-wrap: wrap，另外两张被挤到下一行，无法和第一张并排。核心原因是没有给图片设置统一的宽度约束，flex元素会优先使用自身原始尺寸，超出容器空间时就会换行。

下面是两种可行的修复方案：

方案一：固定宽度分配（强制三张同宽并排） #

修改CSS，给每张图片分配固定比例的宽度，同时去掉不必要的flex-wrap（如果确定在目标屏幕宽度下三张能放下）：

.workImgs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: 100rem;    
  gap: 1rem; /* 用gap控制图片间距，替代margin更简洁 */
}

.workImgs a {
  /* 每张占容器1/3宽度，减去gap的影响 */
  flex: 0 0 calc(33.333% - 1rem);
}

.workImg {
  width: 100%;
  height: 20rem;
  object-fit: cover; /* 保持图片比例，裁剪超出部分 */
}

方案二：自适应宽度（保留小屏幕换行功能） #

如果需要在小屏幕上自动换行，同时在足够宽的屏幕上三张并排，可以使用弹性宽度配合最大宽度限制：

.workImgs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100vw;
  max-width: 100rem;    
  gap: 1rem;
}

.workImgs a {
  /* 基础宽度为1/3，空间不足时自动缩小，最小宽度可根据需求调整 */
  flex: 1 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
  min-width: 15rem; /* 可选：设置最小宽度，避免缩得太窄 */
}

.workImg {
  width: 100%;
  height: 20rem;
  object-fit: cover;
}

修正后的完整代码示例 #

CSS

.workImgs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: 100rem;    
  gap: 1rem;
}

.workImgs a {
  flex: 0 0 calc(33.333% - 1rem);
}

.workImg {
  width: 100%;
  height: 20rem;
  object-fit: cover;
}

HTML

<div class="workImgs">
  <a href="#" target="_blank"><img src="https://picsum.photos/245/182" alt="" class="workImg" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/185/184" alt="" class="workImg" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/184/165" alt="" class="workImg" /></a>
</div>

说明：通过给包裹图片的<a>标签设置flex宽度，配合图片width:100%，能强制所有图片父容器宽度一致，从而让图片尺寸统一，实现三张并排的效果。object-fit: cover保证图片不会因为拉伸变形。

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