Proprietà CSS object-position
Usa la proprietà CSS object-position per definire la posizione dell'elemento nel suo contenitore. Valori e esempi pratici.
La proprietà CSS object-position imposta come un elemento sostituito — come <img> o <video> — viene posizionato all'interno del proprio box. Un elemento sostituito è un elemento il cui contenuto proviene da una sorgente esterna anziché da CSS, quindi il browser decide come adattare quel contenuto allo spazio fornito dal box.
Da sola, object-position non produce alcun effetto visibile a meno che la dimensione intrinseca dell'elemento differisca dalla dimensione del suo box. Questa differenza viene creata dalla proprietà object-fit: una volta che object-fit ridimensiona o ritaglia il contenuto (ad esempio con cover o contain), object-position decide quale parte del contenuto rimane visibile. Immagina il box come una finestra e l'immagine come un quadro più grande dietro di essa — object-position sposta il quadro in modo che una regione diversa sia visibile attraverso la finestra.
Il valore si scrive come una o due coordinate: la prima controlla l'asse x (orizzontale) e la seconda l'asse y (verticale). Se si fornisce un solo valore, il secondo viene impostato di default su center.
/* keyword pairs */
object-position: left top;
object-position: right bottom;
/* lengths and percentages */
object-position: 10px 20%;
object-position: 50% 50%; /* the default — centered */Ogni coordinata può essere una parola chiave (left, right, top, bottom, center), una lunghezza (px, em, …) o una percentuale. Una percentuale di 0% allinea quel bordo del contenuto con lo stesso bordo del box; 100% allinea i bordi opposti.
I valori negativi sono validi — object-position: -20px 0; sposta il contenuto oltre il bordo sinistro del box, nascondendo quella striscia.
| Valore iniziale | 50% 50% |
|---|---|
| Si applica a | Elementi sostituiti. |
| Ereditato | No. |
| Animabile | Sì. L'immagine è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.objectPosition = "20% 0%"; |
Sintassi
object-position: <position> | initial | inherit;Esempi
Esempio con la posizione predefinita (50% 50%)
Il valore predefinito centra il contenuto. Poiché object-fit: cover ritaglia l'immagine per riempire il box, il centraggio mantiene visibile la parte centrale dell'immagine.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 50% 50%;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 50% 50%</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Risultato
Esempio con la parola chiave left
Con left, l'asse orizzontale si allinea al bordo sinistro del box (e l'asse verticale è impostato di default su center), quindi il lato sinistro dell'immagine ritagliata rimane visibile.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: left;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: left</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Esempio con una lunghezza e una percentuale (10px 20%)
È possibile combinare unità diverse tra i due assi. Qui il contenuto è sfalsato di 10px dal bordo sinistro e posizionato al 20% dall'alto del box.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 10px 20%;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 10px 20%</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
<position> | Specifica la posizione dell'elemento sostituito all'interno del suo box. Può essere una parola chiave (top, bottom, left, right, center) o una combinazione di parole chiave, percentuali o lunghezze. |
initial | Imposta la proprietà al suo valore predefinito. |
inherit | Eredita la proprietà dal suo elemento genitore. |
Quando usarla
object-position è particolarmente utile per il ritaglio responsive delle immagini. Quando una foto deve riempire un contenitore di dimensioni fisse (la miniatura di una card, un banner hero, un avatar) con object-fit: cover, il browser ritaglia ciò che non entra. Per impostazione predefinita ritaglia uniformemente dal centro, il che può tagliare la parte importante di una foto — ad esempio il volto di una persona vicino alla parte superiore. Impostando object-position: center top si mantiene visibile quella regione.
Alcune cose da ricordare:
- Interessa solo gli elementi sostituiti (
<img>,<video>,<input type="image">, a volte<object>). Non ha alcun effetto su un<div>. - Si abbina a object-fit:
object-fitdecide come il contenuto viene ridimensionato o ritagliato, eobject-positiondecide dove si trova la finestra visibile. - La sintassi rispecchia quella della proprietà background-position, quindi si applicano le stesse regole per parole chiave e percentuali.