html - 包含背景大小不起作用

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>

在您的情况下，正确的 react 代码应如下所示:

<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 覆盖。

进一步阅读:

The property is a shorthand that sets the following properties in a single declaration: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

stephaniehobson, mfuji09, mfluehr et. al.: background - CSS: Cascading Style Sheets