Proprietà CSS object-fit
Usa la proprietà CSS object-fit per definire come un elemento si adatta al suo contenitore. Valori ed esempi pratici.
La proprietà CSS object-fit controlla come un elemento sostituito — come <img> o <video> — viene ridimensionato per riempire il suo content box. È il corrispettivo di background-size per immagini e video: invece di allungare o distorcere i media, puoi decidere se devono riempire, adattarsi, essere ritagliati o restare invariati all'interno del box assegnato.
Questa pagina spiega cosa fa object-fit, quando usarlo, ciascuno dei suoi valori con un esempio eseguibile e le proprietà correlate per perfezionare il risultato.
Perché usare object-fit
Quando imposti una width e un height fissi su un'immagine il cui rapporto d'aspetto differisce da quello del box, il browser per impostazione predefinita allunga l'immagine — i volti si schiacciano, i loghi si deformano. object-fit risolve questo problema. Ti permette di mantenere le dimensioni del box (importante per layout e griglie prevedibili) indicando al browser come conciliare il rapporto d'aspetto naturale dell'immagine con quel box:
- Usa
coverper immagini hero, miniature e avatar — riempie il box, ritaglia l'overflow, senza mai distorcere. È il valore che si usa più spesso. - Usa
containquando l'intera immagine deve restare visibile (loghi, foto di prodotti) anche se lascia spazio vuoto. - Usa
fill(il valore predefinito) solo quando vuoi davvero che l'immagine venga allungata fino alle dimensioni esatte del box.
Per impostazione predefinita l'immagine è centrata all'interno del box. Per controllare quale parte viene mantenuta durante il ritaglio con cover, abbina object-fit a object-position.
| Valore iniziale | fill |
|---|---|
| Si applica a | Elementi sostituiti (<img>, <video>, <object>, ecc.). |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.objectFit = "cover"; |
Sintassi
Sintassi CSS di object-fit
object-fit: fill | contain | cover | scale-down | none | initial | inherit;In tutti gli esempi seguenti il box è largo 200px e alto 400px — un box alto e stretto — mentre l'immagine sorgente è in formato orizzontale. Questa discrepanza rende visibile il comportamento di ogni valore.
Esempio della proprietà object-fit con il valore "fill"
fill (il valore predefinito) ignora il rapporto d'aspetto e allunga l'immagine per adattarla esattamente al box, così l'albero appare schiacciato.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Fill value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Risultato
L'immagine viene allungata per adattarsi al box, distorcendola. Il valore successivo, cover, risolve questo problema ritagliando invece di allungare.
Esempio della proprietà object-fit con il valore "cover"
cover scala l'immagine per riempire l'intero box preservando il suo rapporto d'aspetto, poi ritaglia ciò che supera i bordi. Nulla viene distorto, ma i bordi possono essere tagliati. È la scelta ideale per miniature e banner hero.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Cover value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Esempio della proprietà object-fit con il valore "contain"
contain scala l'immagine per adattarla all'interno del box preservando il suo rapporto d'aspetto, così l'intera immagine rimane visibile. Poiché il box è più alto di quanto sia larga l'immagine, rimangono delle bande vuote sopra e sotto (spesso chiamate letterboxing).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Contain value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Esempio della proprietà object-fit con il valore "none"
none mantiene l'immagine alle sue dimensioni intrinseche (naturali) e ignora completamente le dimensioni del box. L'immagine è centrata e qualsiasi parte che supera il box viene ritagliata. Usalo quando devi preservare le dimensioni originali in pixel.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: none;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>None value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Esempio della proprietà object-fit con il valore "scale-down"
scale-down confronta none e contain e usa quello che produce l'immagine renderizzata più piccola. In pratica si comporta come contain per le immagini più grandi del box e come none per le immagini più piccole — un modo sicuro per ridurre i media sovradimensionati senza mai ingrandire le immagini piccole.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Scale-down value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| fill | Predefinito. Allunga il contenuto per riempire esattamente il content box, ignorando il suo rapporto d'aspetto (l'immagine potrebbe essere distorta). |
| contain | Scala il contenuto per adattarsi all'interno del box preservando il suo rapporto d'aspetto; potrebbe apparire dello spazio vuoto (letterboxing). |
| cover | Scala il contenuto per riempire il box preservando il suo rapporto d'aspetto; i bordi in eccesso vengono ritagliati. |
| none | Mantiene il contenuto alle sue dimensioni intrinseche, ignorando il box; centrato e ritagliato se supera i bordi. |
| scale-down | Renderizza il contenuto come il più piccolo tra none e contain — non ingrandisce mai l'immagine. |
| initial | Imposta la proprietà al suo valore predefinito (fill). |
| inherit | Eredita la proprietà dal suo elemento padre. |
Supporto browser e suggerimenti
object-fit è supportato in tutti i browser moderni. Tieni presenti questi punti:
- Influisce solo sugli elementi sostituiti (
<img>,<video>,<object>, SVG incorporati). Non ha effetto su un<div>— usa invecebackground-size. - L'elemento occupa comunque la
width/heightche hai impostato;object-fitcambia solo come viene dipinto il contenuto all'interno di quel box. - Abbinalo a
object-positionper scegliere quale parte dell'immagine rimane visibile quando si usacoveronone. - Se l'overflow ritagliato deve rimanere nascosto, il box lo ritaglia già; approfondisci in CSS overflow.