Kuvan keskittäminen tekstin tasauksen avulla: Keskitä

Elementti on rivinsisäiselementeille (näyttö arvo inline-block). Se voidaan helposti keskittää lisäämällä text-align: center;CSS-ominaisuus sen sisältävään pääelementtiin.

Jos haluat keskittää kuvan käyttämällä, text-align: center;sinun on sijoitettava lohkotason elementin sisäpuoli, kuten a div. Koska text-alignominaisuus koskee vain lohkotason elementtejä, asetat text-align: center;käärintälohkotason elementille vaakatasossa keskitetyn .

Esimerkki

   Center an Image using text align center  .img-container { text-align: center; } 

Huomaa: Pääelementin on oltava lohkoelementti. Jos se ei ole lohkoelementti, sinun on lisättävädisplay: block;CSS-ominaisuustext-alignominaisuuden kanssa.

   Center an Image using text align center  .img-container { text-align: center; display: block; }      

Esittely: Codepen

Kohteen sovitus

Kun kuva on keskitetty, haluat ehkä muuttaa sen kokoa. object-fitOminaisuus määrittää, miten elementti reagoi leveys / korkeus on ylätason laatikko.

Tätä ominaisuutta voidaan käyttää kuvien, videoiden tai minkä tahansa muun median käyttämiseen. Sitä voidaan käyttää myös object-positionominaisuuden kanssa saadaksesi paremman hallinnan median esityksestä.

Pohjimmiltaan käytämme object-fitominaisuutta määrittelemään, kuinka se venyttää tai pilata sisäistä mediaa.

Syntaksi

.element 

Arvot

• fill: Tämä on oletusarvo . Muuta sisällön kokoa vastaamaan sen vanhempaa laatikkoa kuvasuhteesta riippumatta.
• contain: Muuta sisällön kokoa siten, että se täyttää ylätason ruudun käyttämällä oikeaa kuvasuhdetta.
• cover: samanlainen kuin containmutta rajaa usein sisältöä.
• none: näytä kuva alkuperäisessä koossa.
• scale-down: vertaa eroa noneja containlöytää pienin betonikohteen koko.

Selaimen yhteensopivuus

object-fitTukevat useimmat uudet selaimet, että viimeisimmät infoa yhteensopivuudesta voit tarkistaa tämän //caniuse.com/#search=object-fit.

Dokumentointi

• text-align - MDN
• object-fit - MDN
• - MDN