如何修复flex响应式图片卡片小屏100%宽度时的图片裁切问题

问题现象 #

• 宽屏场景每行展示5张橙子图片卡片，展示效果正常
• 通过媒体查询修改flex-basis实现断点适配：
  • 屏幕宽度<1200px时每行展示4张卡片
  • 屏幕宽度<1024px时每行展示3张卡片
  • 屏幕宽度<768px时每行展示1张卡片
• 异常：当flex-basis: 100%（小屏单卡片占满整行）时，卡片内背景图出现异常裁切，当前图片已设置background-size: cover属性
  

原始实现代码 #

CSS部分 #

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.card {
  background: black;
  flex-basis: 20%;
  height: 200px;
}

.card-image {
  width: 100%;
  height: 100%;
  background-image: url("https://res.cloudinary.com/dudegkgw9/image/upload/v1655351737/cloudinary_riys5j.jpg");
  background-size: cover;
}

@media only screen and (max-width: 1200px) {
  .card {
    flex-basis: 25%;
  }
}

@media only screen and (max-width: 1024px) {
  .card {
    flex-basis: 33.333%;
  }
}

@media only screen and (max-width: 768px) {
  .card {
    flex-basis: 100%;
  }
}

HTML部分 #

<div class="container">
  <div class="card">
    <div class="card-image"></div>
  </div>
  <div class="card">
    <div class="card-image"></div>
  </div>
  <div class="card">
    <div class="card-image"></div>
  </div>
  <div class="card">
    <div class="card-image"></div>
  </div>
</div>

问题原因 #

1. 卡片设置了固定高度height: 200px，小屏下卡片宽度撑满整行（移动端宽度通常为375px~480px），容器宽高比远大于橙子原图比例，background-size: cover规则会优先铺满容器，必然会裁切图片边缘内容；且未设置background-position属性，背景图默认从左上角开始定位，会导致核心画面偏移，出现异常裁切观感。
2. 仅设置flex-basis未配置flex-grow和flex-shrink，flex项默认伸缩属性可能导致宽度计算偏差，加上未统一盒模型，默认content-box模式下内边距、边框会撑破容器宽度，进一步引发布局错位。

修复方案 #

方案1：保留固定高度，优化背景定位与Flex计算 #

适合需要统一卡片高度的场景，修复后图片居中展示，裁切时保留橙子核心画面，不会出现偏移：

/* 全局统一盒模型，清除默认边距，避免布局计算偏差 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.card {
  background: black;
  /* 用flex简写替代单独flex-basis，固定宽度不伸缩，计算更准确 */
  flex: 0 0 20%;
  height: 200px;
  /* 如需卡片间距，可设置内边距，不会撑破容器 */
  padding: 4px;
}
.card-image {
  width: 100%;
  height: 100%;
  background-image: url("https://res.cloudinary.com/dudegkgw9/image/upload/v1655351737/cloudinary_riys5j.jpg");
  background-size: cover;
  /* 核心修复：背景图居中定位，裁切时保留核心画面 */
  background-position: center center;
  background-repeat: no-repeat;
}

/* 媒体查询同步替换为flex简写，逻辑不变 */
@media only screen and (max-width: 1200px) {
  .card {
    flex: 0 0 25%;
  }
}
@media only screen and (max-width: 1024px) {
  .card {
    flex: 0 0 33.333%;
  }
}
@media only screen and (max-width: 768px) {
  .card {
    flex: 0 0 100%;
  }
}

方案2：固定宽高比，完整展示图片无裁切 #

适合需要完整展示图片内容的场景，去掉固定高度改用aspect-ratio统一卡片比例，调整背景尺寸规则实现全尺寸下图片不裁切：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.card {
  background: black;
  flex: 0 0 20%;
  /* 按图片实际比例设置宽高比，所有断点下卡片比例统一 */
  aspect-ratio: 3/2;
  padding: 4px;
}
.card-image {
  width: 100%;
  height: 100%;
  background-image: url("https://res.cloudinary.com/dudegkgw9/image/upload/v1655351737/cloudinary_riys5j.jpg");
  /* 调整为contain，完整展示图片不裁切 */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
}

/* 媒体查询部分同方案1 */
@media only screen and (max-width: 1200px) {
  .card {
    flex: 0 0 25%;
  }
}
@media only screen and (max-width: 1024px) {
  .card {
    flex: 0 0 33.333%;
  }
}
@media only screen and (max-width: 768px) {
  .card {
    flex: 0 0 100%;
  }
}

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