Kaip centruoti vaizdą naudojant teksto lygiavimą:
Elementas yra tiesinis elementas (ekranas vertė inline-block
). Jį galima lengvai centruoti, pridedant text-align: center;
CSS ypatybę prie pagrindinio elemento, kuriame jis yra.
Jei norite centruoti vaizdą naudodami text-align: center;
, turite įdėti
vidinį bloko lygio elementą, pvz div
., A. Kadangi text-align
ypatybė taikoma tik blokų lygio elementams, dedate text-align: center;
ant vyniojimo bloko lygio elementų, kad gautumėte horizontaliai centruotą
.
Pavyzdys
Center an Image using text align center .img-container { text-align: center; }
Pastaba: pagrindinis elementas turi būti blokinis elementas. Jei tai nėra bloko elementas,display: block;
kartu su ypatybeturėtumėte pridėtiCSStext-align
ypatybę.
Center an Image using text align center .img-container { text-align: center; display: block; }
Demonstracija: „ Codepen“
Object Fit
Kai vaizdas bus centruotas, galbūt norėsite jį pakeisti. Į object-fit
nuosavybės Nurodo, kaip elementas reaguoja į plotis / aukštis IT patronuojanti dėžutę.
Ši nuosavybė gali būti naudojama vaizdams, vaizdo įrašams ar bet kuriai kitai laikmenai. Jis taip pat gali būti naudojamas kartu su object-position
nuosavybe, kad būtų galima geriau kontroliuoti, kaip rodoma laikmena.
Iš esmės mes naudojame object-fit
ypatybę, norėdami apibrėžti, kaip ji ištempia ar sutramdo vidinę laikmeną.
Sintaksė
.element
Vertybės
fill
: Tai yra numatytoji reikšmė . Pakeiskite turinio dydį, kad jis atitiktų pagrindinį langelį, neatsižvelgiant į formato koeficientą.contain
: Pakeiskite turinio dydį, kad užpildytumėte pagrindinį langelį, naudodami teisingą formato santykį.cover
: panašus kaip,contain
bet dažnai apkarpomas turinys.none
: rodyti vaizdą originaliu dydžiu.scale-down
: palyginkite skirtumą tarpnone
ircontain
raskite mažiausią betono objekto dydį.
Naršyklės suderinamumas
Tai object-fit
palaiko dauguma šiuolaikinių naršyklių, kad sužinotumėte naujausią informaciją apie suderinamumą, apsilankykite //caniuse.com/#search=object-fit.
Dokumentacija
- sulyginti tekstą - MDN
- objektui pritaikyti - MDN
- MDN