Hintergrundgröße nicht funktionieren - HTML, CSS, HTML5, CSS3, CSS-Selektoren

Ich habe das folgende HTML in einer render () - Funktion mit Reactjs deklariert

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

und mein CSS sieht wie folgt aus:

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

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

Aktueller Status: Es wird nur ein kleiner Teil des Bildes angezeigt.

Erwartet: Das gesamte Bild hat die Größe geändert und passt zum Div.

Bildschirmfoto:

Sie können den Bildlink anzeigen und das gesamte Bild separat in der neuen Registerkarte anzeigen.

Antworten:

Der Inline-Stil überschreibt alle von CSS bereitgestellten Stile. Sie müssen es angeben durch 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>

In Ihrem Fall würde der richtige Reaktionscode folgendermaßen aussehen:

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

Erläuterung:

Ihre CSS-Stile umfassen background-size und background-repeat, die durch den Inline-Stil überschrieben wird background.

Weiterführende Literatur:

Die Eigenschaft ist eine Abkürzung, die die setztFolgende Eigenschaften in einer einzelnen Deklaration: Hintergrundclip, Hintergrundfarbe, Hintergrundbild, Hintergrundursprung, Hintergrundposition, Hintergrundwiederholung, Hintergrundgröße und Hintergrundanhang.

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

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