如何实现不同尺寸图片行等高排列且撑满窗口全宽

核心实现逻辑 #

• 画廊容器使用弹性布局，允许子项换行，宽度撑满对应窗口区域
• 所有图片项先锁定统一高度，宽度优先按原图比例自动缩放，避免画面拉伸变形
• 图片间设置统一间距，通过弹性增长属性让每行剩余空间自动分配给同排图片，实现整行恰好填满容器宽度，不会出现侧边留白
• 图片配置object-fit属性，避免比例失调，可根据需求选择裁切适配或完整显示

可直接复用的实现代码 #

HTML结构参考 #

<!-- 画廊外层容器 -->
<div class="img-gallery">
  <!-- 单张图片项，替换为自身站点的图片资源即可 -->
  <div class="gallery-item">
    <img src="你的图片资源地址" alt="画廊作品">
  </div>
  <div class="gallery-item">
    <img src="你的图片资源地址" alt="画廊作品">
  </div>
  <!-- 其余图片按相同结构追加即可 -->
</div>

CSS样式代码 #

/* 画廊容器基础样式 */
.img-gallery {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px; /* 控制图片之间的间距，可根据设计需求调整数值 */
  padding: 16px; /* 画廊整体内边距，按需调整 */
  box-sizing: border-box;
}

/* 图片项样式 */
.gallery-item {
  flex-grow: 1; /* 核心属性：自动分配每行剩余空间，撑满整行宽度 */
  height: 240px; /* 统一的图片展示高度，可按需调整数值 */
  overflow: hidden;
  border-radius: 4px; /* 图片圆角，不需要可直接删除 */
}

/* 图片本身样式 */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片不变形，超出容器部分自动裁切；要完整显示图片可改为contain */
  display: block;
  transition: transform 0.3s ease; /* 可选：hover动效，不需要可删除 */
}

/* 可选：鼠标悬停图片放大效果 */
.gallery-item:hover img {
  transform: scale(1.05);
}

适配调整提示 #

• 移动端适配可通过媒体查询，在小屏幕下调低gallery-item的固定高度值，比如手机端设置为180px，展示效果更协调
• 如果不希望图片被裁切，把object-fit属性值改为contain即可，此时图片会完整显示在固定高度容器内，可按需给容器加背景色填补空白
• 调整gap属性的数值可以修改图片之间的空隙大小，数值越大空隙越宽

如果不希望最后一行图片数量不足时被过度拉伸，可以在画廊容器末尾加一个和图片项高度一致、宽度为0的空占位元素，就能保证最后一行图片按正常比例显示，不会被异常拉宽。

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