如何适配不同尺寸图片实现响应式网格布局：桌面4列平板/移动端2列

你现有代码的核心问题如下：

• object-fit属性仅对img等替换元素生效，写在.services容器上不会生效，无法控制图片裁剪逻辑
• 未给img标签设置宽高规则，图片会按原始尺寸展示，导致容器被撑开、排列错位
• 使用float布局需要额外处理浮动塌陷问题，且对齐控制不如Grid布局方便
• 原始代码给.services设置100vh高度不符合常规图片展示需求，会导致区域过高

最优解决方案（使用CSS Grid实现） #

Grid是原生的网格布局方案，不用处理浮动相关的兼容问题，代码更简洁可控。

1. 修改HTML结构 #

给外层容器加专属类名，同时修正img单标签不需要闭合的语法错误：

<div class="services-grid">
  <div class="services-item">
    <img src="./Photos/services-1.jpg" alt="服务展示图">
  </div>
  <div class="services-item">
    <img src="./Photos/services-2.jpg" alt="服务展示图">
  </div>
  <div class="services-item">
    <img src="./Photos/services-3.jpg" alt="服务展示图">
  </div>
  <div class="services-item">
    <img src="./Photos/services-4.jpg" alt="服务展示图">
  </div>
</div>

2. 替换CSS规则 #

/* 外层网格容器 */
.services-grid {
  display: grid;
  /* 桌面端默认4列等宽 */
  grid-template-columns: repeat(4, 1fr);
  /* 可根据需求调整网格间距，不需要可以删除 */
  gap: 8px;
  width: 100%;
}

/* 图片容器 */
.services-item {
  /* 固定容器宽高比，1/1是正方形，可根据需求改成4/3等比例 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* 图片适配规则 */
.services-item img {
  width: 100%;
  height: 100%;
  /* 图片裁剪填充容器，不变形 */
  object-fit: cover;
}

/* 平板、移动端适配，断点可自定义调整 */
@media only screen and (max-width: 1180px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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