CSS object-fit ominaisuus

Määritelmä ja käyttö

object-fit-ominaisuus määrittelee, miten <img> tai <video> -elementin kokoa mukautetaan sen konteerin sopivuuden.

Tämä ominaisuus kertoo, miten sisältö täyttää konteinereita. Esimerkiksi "pitäen suhteet" tai "leviäen mahdollisimman paljon tilaa".

Katso myös:

CSS -opas:CSS object-fit

CSS -viittausopas:CSS object-position

HTML DOM -viittausopas:objectFit-ominaisuus

Esimerkki

Leikkaa kuvan laidat pitäen suhteet, ja täytä tila:

img.a {
  leveys: 200px;
  korkeus: 400px;
  object-fit: cover;
}

Kokeile itse

CSS-kieli

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
fill Oletusarvo. Mukauta korvaavan sisällön kokoa täyttääksesi elementin sisällön kehys. Tarvittaessa objekti venytetään tai puristetaan.
contain Koon muuttaminen korvaavaa sisältöä säilyttääkseen sen suhteet, samalla sopiakseen elementin sisällön kehystä.
cover Mukauta korvaavan sisällön kokoa täyttääksesi täyttä elementin sisällön kehys, samalla säilyttäen sen suhteet. Objekti leikataan.
none Korvaava sisältö ei mukautu kokoon.
scale-down Sisällön koko on sama kuin none tai contain yhdestä, riippuen siitä, kumpi saa pienemmän objektin koon.
initial Aseta tämä ominaisuus sen oletusarvoon. Katso: initial.
inherit Periisi tämän ominaisuuden arvon isältä elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: Katso erilliset ominaisuudet.
Perintä: Ei
Animaation tekijä: Ei tuettu. Katso:Animaatiotunnukset.
Versio: CSS3
JavaScript-kieli: object.style.objectFit="cover"

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

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