Proprietà object-position CSS

Definizione e uso

L'attributo object-position, utilizzato insieme a object-fit, determina come utilizzare i coordinate x/y per posizionare <img> o <video> nel loro "proprio riquadro di contenuto".

Vedi anche:

Corso CSS:CSS object-fit

Manuale di riferimento CSS:CSS object-position

Manuale di riferimento HTML DOM:Proprietà objectPosition

Esempio

Adatta la dimensione dell'immagine in modo che si adatti al suo riquadro di contenuto, e muovi l'immagine nel riquadro di contenuto di 5px verso sinistra e 10% verso l'alto:

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

Prova tu stesso

Sintassi CSS

object-position: position|initial|inherit;

Valore dell'attributo

Valore Descrizione
position

Determina la posizione dell'immagine o del video nel suo riquadro di contenuto.

Il primo valore controlla l'asse x, il secondo valore controlla l'asse y.

Può essere una stringa (sinistra, centro o destra) o un numero (in px o %). Valori negativi ammessi.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: 50% 50%
Ereditarietà: sì
Produzione di animazioni: Supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.objectPosition="0 10%"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.

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