React中background-size:contain不生效，背景图无法完整适配容器

嘿，我一眼就揪出你遇到的问题根源啦——你在React的inline样式里用了background简写属性，它直接把CSS中设置的background-size: contain给覆盖掉了！

因为background是个“霸道”的简写属性，当你用它设置背景图片时，会把所有背景相关属性重置为默认值，其中background-size的默认值是auto，这就导致图片以原始尺寸显示，而你的容器只有51x51，自然只能看到图片左上角的一小部分。

下面给你几种实用的解决方案：

方案1：拆分background属性为background-image #

把inline样式里的background替换成background-image，这样就不会干扰CSS里设置的background-size、background-repeat等属性了：

<div className="companyImages">
  <div 
    className="thubm" 
    style={{
      backgroundImage: 'url(https://lumiere-a.akamaihd.net/v1/images/character_mickeymouse_home_mickey_notemplate_3a0db1b2.jpeg?region=0,0,600,600&width=320)'
    }}
  ></div>
</div>

方案2：在background简写中包含background-size #

利用background简写的语法，在URL后加上斜杠和background-size的值，就能同时搞定图片和尺寸设置：

<div className="companyImages">
  <div 
    className="thubm" 
    style={{
      background: 'url(https://lumiere-a.akamaihd.net/v1/images/character_mickeymouse_home_mickey_notemplate_3a0db1b2.jpeg?region=0,0,600,600&width=320) / contain no-repeat'
    }}
  ></div>
</div>

方案3：在inline样式中完整设置所有背景属性 #

直接把需要的背景属性都写在inline样式里，它的优先级会高于外部CSS：

<div className="companyImages">
  <div 
    className="thubm" 
    style={{
      background: 'url(https://lumiere-a.akamaihd.net/v1/images/character_mickeymouse_home_mickey_notemplate_3a0db1b2.jpeg?region=0,0,600,600&width=320)',
      backgroundSize: 'contain',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center' // 可选，确保图片居中显示
    }}
  ></div>
</div>

额外小提示 #

如果你希望图片完全填满容器（可能会裁剪掉图片边缘，但不会留空白），可以把background-size的值改成cover，根据你的实际需求选就行~

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