содержать размер фона не работает

Question

У меня есть следующий html, объявленный внутри функции render () с использованием Reactjs

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

Текущее состояние: только небольшая частьизображение показано.

Защищено: Все изображение изменено в размерах и соответствует размеру.

Снимок экрана:

пока вы можете посмотреть ссылку на изображение и увидеть все изображение отдельно в новой вкладке.

Answer 1

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

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

Answer 2

Встроенный стиль переопределяет все ваши стили 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: каскадные таблицы стилей