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-alignypatybė 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-alignypatybę.

   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-fitnuosavybė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-positionnuosavybe, kad būtų galima geriau kontroliuoti, kaip rodoma laikmena.

Iš esmės mes naudojame object-fitypatybę, 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, containbet dažnai apkarpomas turinys.
  • none: rodyti vaizdą originaliu dydžiu.
  • scale-down: palyginkite skirtumą tarp noneir containraskite mažiausią betono objekto dydį.

Naršyklės suderinamumas

Tai object-fitpalaiko 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