包含背景大小不起作用

Question

我在使用Reactjs

的render（）函数中声明了以下html

 <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)'}}></div>
</div>

我的CSS如下所示：

.companyImages div {
  display: inline-block;
  margin:4px;
  width:51px;
  height:51px;
}

.companyImages .thubm {
  border-radius: 3px;
  background-size: contain;
  background-repeat: no-repeat;
}

当前状态：仅显示图像的一小部分。

Exptected：整个图像调整大小并适合div。

截图：

虽然您可以在新标签中查看图像链接并分别查看整个图像。

Answer 1

内联样式会覆盖CSS提供的所有样式。您必须按background-image指定。

＆＃13;

＆＃13;

.companyImages div {
  display: inline-block;
  margin: 4px;
  width: 51px;
  height: 51px;
}

.companyImages .thubm {
  border-radius: 3px;
  background-size: contain;
  background-repeat: no-repeat;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在您的情况下，正确的反应代码将如下所示：

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

<强>解释

您的CSS样式包括background-size和background-repeat，它们将被内联样式background覆盖。

进一步阅读：

  

该属性是一个简写，在单个声明中设置以下属性：background-clip，background-color，background-image，background-origin，background-position，background-repeat，background-size和background-attachment

     

stephaniehobson，mfuji09，mfluehr等。 al。：background - CSS: Cascading Style Sheets

Answer 2

＆＃13;

＆＃13;

.companyImages div {
      display: inline-block;
      margin: 4px;
      width: 51px;
      height: 51px;
    }
    .thubm {
        background: url("https://lumiere-a.akamaihd.net/v1/images/character_mickeymouse_home_mickey_notemplate_3a0db1b2.jpeg?region=0,0,600,600&width=320");
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 3px;
    }
  

＆＃13;

     <div class="companyImages">
      <div class="thubm"> </div>
    </div>

＆＃13;

＆＃13;

＆＃13;