Proprietà CSS di posizione dell'oggetto
Esempio
Ridimensiona un'immagine per adattarla al riquadro del contenuto e posiziona l'immagine a 5px da sinistra e al 10% dall'alto all'interno del riquadro del contenuto:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Definizione e utilizzo
La object-position
proprietà viene utilizzata insieme a object-fit per specificare come posizionare un <img> o un <video> con le coordinate x/y all'interno della propria "casella del contenuto".
Valore di default: | 50% 50% |
---|---|
Ereditato: | sì |
Animabile: | sì. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.objectPosition="0 10%" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
Sintassi CSS
object-position: position|initial|inherit;
Valori di proprietà
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 |
Pagine correlate
Tutorial CSS: adattamento agli oggetti CSS
Riferimento CSS: adattamento oggetto CSS
Riferimento HTML DOM: la proprietà objectPosition