Vlastnost CSS object-position
Příklad
Změňte velikost obrázku tak, aby se vešel do pole obsahu, a umístěte obrázek 5 pixelů zleva a 10 % shora do pole obsahu:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Definice a použití
Tato object-position
vlastnost se používá spolu s přizpůsobením objektu k určení, jak by měl být <img> nebo <video> umístěn se souřadnicemi x/y uvnitř jeho "vlastního pole obsahu".
Výchozí hodnota: | 50 % 50 % |
---|---|
Zděděno: | Ano |
Animovatelné: | Ano. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.objectPosition="0 10 %" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
Syntaxe CSS
object-position: position|initial|inherit;
Hodnoty vlastností
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Související stránky
CSS tutoriál: CSS object-fit
CSS reference: CSS object-fit
Odkaz HTML DOM: Vlastnost objectPosition