CSS object-position ominaisuus

Määritelmä ja käyttö

object-position ominaisuus käytetään yhdessä object-fit ominaisuuden kanssa, jotta voidaan määrätä, miten x/y-koordinaatit käytetään <img> tai <video> "oman sisällön kehyskehässä".

Katso myös:

CSS oppaasti:CSS object-fit

CSS viittausopas:CSS object-position

HTML DOM viittausopas:objectPosition ominaisuus

esimerkki

Muuta kuvan kokoa, jotta se sopii sen sisällön kehyskehään, ja siirrä kuvaa 5px vasemmalle ja 10% ylös:

img.a {
  leveys: 200px;
  korkeus: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

Kokeile itse

CSS syntax

object-position: position|initial|inherit;

ominaisuusarvo

arvo kuvaus
position

Määrittää kuvan tai videon sijainnin sen sisällön kehyskehässä.

Ensimmäinen arvo hallitsee x-akselia, toinen arvo hallitsee y-akselia.

Voisi olla merkkijono (vasen, keskitetty tai oikea) tai luku (px tai % yksikössä). Sallitaan negatiiviset arvot.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: 50% 50%
Perintä: kyllä
Animaation tekijä: Tuki. Katso:Animointiin liittyvät ominaisuudet.
Versio: CSS3
JavaScript syntax: JavaScript syntax: object.style.objectPosition="0 10%"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimeen, joka täysin tukee tätä ominaisuutta.

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