CSS: la proprietà object-fit

object-fit è una proprietà CSS introdotta per gestire le dimensioni di un'immagine all'interno di un contenitore. La proprietà determina come l'immagine viene adattata per riempire il contenitore.

Ci sono cinque valori possibili per la proprietà object-fit: fill, contain, cover, none, e scale-down.

1. fill farà in modo che l'immagine riempia interamente il contenitore, distorcendo l'immagine se necessario per farla adattare alle dimensioni del contenitore.
2. contain farà in modo che l'immagine sia visualizzata interamente all'interno del contenitore mantenendo le sue proporzioni (potrebbe lasciare dello spazio vuoto intorno all'immagine).
3. cover farà in modo che l'immagine riempia interamente il contenitore mantenendo le sue proporzioni (potrebbe tagliare parte dell'immagine).
4. none non effettuerà alcun adattamento.
5. scale-down farà in modo che l'immagine sia visualizzata come contain se l'immagine è più piccola del contenitore o come cover se l'immagine è più grande del contenitore.

Per utilizzare questa proprietà, basta specificarla sull'immagine, ad esempio:

img.fit {
    object-fit: scale-down;
}

object-fit è compatibile con la maggior parte dei browser moderni, incluse le ultime versioni di Chrome, Firefox, Safari e Edge.