conține dimensiunea fundalului nu funcționează (Programare, Html, Css, Selectori Css)

Mizlul a intrebat.
a intrebat.

Am următorul html declarat în interiorul unei funcții render() folosind 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>

iar CSS-ul meu arată ca mai jos:

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

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

Starea actuală: este afișată doar o mică parte din imagine.

Expusă: Întreaga imagine este redimensionată și se potrivește cu div-ul.

Captură de ecran:

în timp ce puteți să vă uitați la linkul imaginii și să vedeți întreaga imagine separat într-o filă nouă.

Comentarii

  • Ați putea furniza o captură de ecran, vă rog? –  > Por Michael Czechowski.
  • ce browser folosiți? –  > Por לבני מלכה.
  • Folosesc Google Chrome, dar este la fel și cu Firefox.  > Por Mizlul.
  • încercați: .companyImages{height: 100%;} –  > Por לבני מלכה.
2 răspunsuri
Michael Czechowski

Stilul în linie înlocuiește toate stilurile furnizate de CSS. Trebuie să îl specificați prin background-image.

În cazul tău, codul react corect ar arăta așa:

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

Explicație:

Stilurile dvs. CSS includ background-size și background-repeat, , care vor fi suprascrise de stilul inline background.

Citiți mai departe:

Proprietatea este o prescurtare care stabilește următoarele proprietăți într-o singură declarație: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size și background-attachment.

stephaniehobson, , mfuji09, , mfluehr ș.a.: fundal – CSS: Foi de stil în cascadă

Ankit Jaiswal