съдържат размер на фона не работи - html, css, html5, css3, css-селектори

Имам следния 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;
}

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

Изтеглено: Цяло изображение е преоразмерено и се побира в div.

Screenshot:

докато можете да погледнете връзката към изображението и да видите цялото изображение отделно в нов раздел.

Отговори:

Вграденият стил отменя всички ваши стилистични стилове, предоставени от 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-repeth, size-background и background-attachment.

stephaniehobson, mfuji09, mfluehr et. др .: фон - CSS: Каскадни таблици за стил

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