Objektas tinka - CSS-gudrybės | CSS almanachas 2025

Į object-fitnuosavybės apibrėžia, kaip elementas reaguoja į aukštį ir plotį jo turinio langelį. Jis skirtas vaizdams, vaizdo įrašams ir kitiems įterpiamiems laikmenų formatams kartu su object-positionnuosavybe. Naudojamas savaime, object-fitmes galime apkarpyti įterptą vaizdą, suteikdami mums galimybę tiksliai kontroliuoti, kaip jis tupi ir tęsiasi dėžutės viduje.

object-fit galima nustatyti naudojant vieną iš šių penkių verčių:

fill: tai yra numatytoji reikšmė, kuri ištempia vaizdą, kad atitiktų turinio langelį, neatsižvelgiant į jo formato koeficientą.
contain: padidina arba sumažina vaizdo dydį, kad užpildytų langelį, išlaikant jo formato santykį.
cover: vaizdas užpildys langelio aukštį ir plotį, dar kartą išlaikydamas savo formato santykį, bet dažnai apkarpydamas vaizdą.
none: vaizdas ignoruos tėvų aukštį ir plotį ir išlaikys pradinį dydį.
scale-down: paveikslėlyje bus palygintas skirtumas tarp noneir containsiekiant rasti mažiausią konkretaus objekto dydį.

Taip galime nustatyti tą nuosavybę:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Kadangi antrojo vaizdo kraštinių santykis skiriasi nuo kairiajame esančio originalaus vaizdo, jis išsities už savo turinio langelio ribų, apkarpydamas viršutinę ir apatinę vaizdo dalis.

Verta paminėti, kad pagal numatytuosius nustatymus vaizdas yra sutelktas jo turinio laukelyje, tačiau tai galima pakeisti naudojant object-positionypatybę.

Demonstracija

Žemiau pateiktoje demonstracijoje pateikiami penki pavyzdžiai, išsamiai apibūdinantys, kaip norėtume, kad vaizdas susmulkėtų į turinio laukelį, kuris kartais yra mažesnis arba didesnis nei jo pradinis plotis (pakeiskite naršyklės dydį, kad geriau suprastumėte, kaip tai gali veikti):

Peržiūrėkite Robin Rendle (@robinrendle) „Pen“ objekto pritaikymą „CodePen“.

Jei paveikslėlio turinys dėl kokių nors priežasčių neužpildo turinio laukelio, neužpildytoje vietoje bus rodomas elemento fonas, šiuo atveju - šviesiai pilkas fonas.

Naršyklės palaikymas

Verta paminėti, kad „iOS 8-9.3“ ir „Safari 7-9.1“ object-fitnuosavybė, bet ne object-position.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.