CSS object-fit属性失效：如何将图片适配Flex容器

你遇到的核心问题是**object-fit属性不适用于背景图**——这个属性仅对<img>、<video>这类替换元素生效，而你是通过background属性给<div>设置背景图，所以object-fit完全起不到作用。

以下是两种可行的解决方案：

方案一：用背景图属性适配（保留div结构时推荐） #

通过background-size、background-position等原生背景图属性，替代object-fit实现图片适配：

修改后的CSS代码：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(244, 247, 252, 0.5) 0%, rgba(244, 247, 252, 0.5) 100%);
  justify-content: center;
}

.flex-container>div {
  background-color: white;
  width: 20vh;
  height: 20vh; /* 明确设置高度，避免依赖line-height导致异常 */
  margin: 15px;
  text-align: center;
  line-height: 20vh;
  font-size: 30px;
}

.sdg1 {
  background: url("https://via.placeholder.com/1536.jpg");
  background-size: contain; /* 保持图片比例，完整显示在容器内 */
  background-position: center; /* 图片居中对齐 */
  background-repeat: no-repeat; /* 禁止图片平铺 */
}

• 若需要图片覆盖整个容器（允许裁剪超出部分），可将background-size: contain替换为background-size: cover；
• 明确设置height:20vh比单纯依赖line-height更稳定，避免div因无内容导致高度塌陷。

方案二：改用<img>标签（适合单纯显示图片的场景） #

将背景图替换为<img>元素，让object-fit正常生效：

修改后的HTML：

<div className="flex-container">
  <img className="sdg1" src="https://via.placeholder.com/1536.jpg" alt="" />
  <div>SDG</div>
  <div>SDG</div>
  <!-- 其他SDG div保持不变 -->
</div>

修改后的CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(244, 247, 252, 0.5) 0%, rgba(244, 247, 252, 0.5) 100%);
  justify-content: center;
}

.flex-container>div, .flex-container>img {
  background-color: white;
  width: 20vh;
  height: 20vh;
  margin: 15px;
  text-align: center;
  line-height: 20vh;
  font-size: 30px;
}

.sdg1 {
  object-fit: contain; /* 现在可正常控制图片适配规则 */
  display: block; /* 消除图片默认的行内元素间隙 */
}

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