包含背景大小不起作用

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;
}

当前状态:仅显示图像的一小部分.

已过滤:整个图像调整大小并适合div.

截图:

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

Answer 1

内联样式会覆盖CSS提供的所有样式.你必须指定它background-image.

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

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

<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>

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

<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 et.al.:background - CSS:层叠样式表