Attributo CSS object-fit
- Pagina precedente Stili di immagine CSS
- Pagina successiva object-position CSS
CSS object-fit L'attributo viene utilizzato per definire come regolare la dimensione di <img> o <video> per adattarsi al contenitore.
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| Attributo | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Attributo CSS object-fit
CSS object-fit L'attributo viene utilizzato per specificare come regolare la dimensione di <img> o <video> per adattarsi al contenitore.
Questa proprietà informa come il contenuto deve essere riempito nel contenitore. Ad esempio, "mantenere il rapporto di aspetto" o "espandersi e occupare il maggior spazio possibile".
Ecco un'immagine di turchese proveniente dal Parco delle Fiori di Shanghai, che è di 300x300 pixel:
Ma, se impostiamo l'immagine sopra in 200x300 pixel, apparirà così:
Esempio
img {
width: 200px;
height: 300px;
}
vediamo l'immagine compressa per adattarsi al contenitore di 200x300 pixel e il rapporto di aspetto originale distrutto.
Se usiamo object-fit: cover;che taglierà i lati dell'immagine, mantenere il rapporto di aspetto e riempire lo spazio, come mostrato di seguito:
Esempio
img {
width: 200px;
height: 400px;
object-fit: cover;
}
Un altro esempio
In questo caso, abbiamo due immagini che desideriamo riempire il 50% della larghezza e il 100% dell'altezza della finestra del browser.
Nell'esempio seguente, non usiamo object-fit, quindi, quando regoliamo la dimensione della finestra del browser, il rapporto di aspetto dell'immagine sarà distrutto:
Esempio
Nell'esempio successivo, usiamo object-fit: cover;, quindi, quando regoliamo la dimensione della finestra del browser, manteniamo il rapporto di aspetto dell'immagine:
Esempio
Tutti i valori dell'attributo CSS object-fit
object-fit L'attributo accetta i seguenti valori:
fill- Valore predefinito. Regolamentare la dimensione del contenuto sostituito per riempire il riquadro di contenuto dell'elemento. Se necessario, stirare o comprimere l'oggetto per adattarsi a questo oggetto.contain- Scalare il contenuto sostituito per mantenere il rapporto di aspetto orizzontale e verticale, e inserirlo nel riquadro di contenuto dell'elemento.cover- Regolamentare la dimensione del contenuto sostituito per mantenere il rapporto di aspetto dell'intero riquadro di contenuto dell'elemento di riempimento. L'oggetto sarà ritagliato per adattarsi.none- Non adatta la dimensione del contenuto sostitutivo.scale-down- Adatta la dimensione del contenuto come se non fosse stato specificato o contenuto (può causare dimensioni specifiche più piccole)
Esempi di seguito dimostrano object-fit Tutti i valori possibili dell'attributo:
Esempio
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- Pagina precedente Stili di immagine CSS
- Pagina successiva object-position CSS
