Style objectFit ominaisuus

Määritelmä ja käyttö

objectFit Ominaisuus määrittää, miten <img> tai <video> elementin kokoa säätää, jotta se sopii sen konteineriin.

Tämä ominaisuus kertoo, miten sisältö täyttää konteinerin useilla tavoilla; esimerkiksi "pitäen pituusleveyssuhteen" tai "levittäen mahdollisimman paljon tilaa".

Katso myös:

CSS opetus:CSS object-fit

CSS viittausopas:object-fit ominaisuus

Esimerkki

Leikkaa kuvan sivut pois, säilytä pituusleveys suhde ja täytä tila:

document.getElementById("myImg").style.objectFit = "cover";

Kokeile itse

Syntaksi

Palauta objectFit ominaisuus:

object.style.objectFit

Aseta objectFit ominaisuus:

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Ominaisuusarvo

Arvo Kuvaus
fill Oletus. Säädä korvataan sisällön kokoa täyttääkseen elementin sisällösluukun. Jos tarpeen, objekti venytetään tai puristetaan.
contain Skaalaa korvataan sisältöä pitääkseen sen pituusleveyssuhteen, samalla sopiakseen elementin sisällösluukkuihin.
cover Säädä korvataan sisällön kokoa, jotta se täyttää täyttämisen elementin koko sisällösluukun pitäen sen pituusleveyssuhteen.
none Korvataan oleva sisältö ei säädä kokoa.
scale-down Sisällön mitat ovat samaa kuin none tai contain yhdestä, riippuen siitä, kumpi saa pienemmän objektin mitat.
initial Aseta tämä ominaisuus sen oletusarvoon. Katso initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltään. Katso inherit.

Tekninen tarkistus

Oletusarvo: fill
Palautusarvo: merkkijono, joka ilmaisee elementin object-fit ominaisuus.
CSS versio: CSS3

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen täysin tukevan kyseisen ominaisuuden selaimen version.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0