Sappiamo che le immagini svolgono un ruolo cruciale in una pagina web. Aiutano a mostrare il contenuto in modo efficace e chiaro. A volte, l'immagine del contenuto può avere una dimensione maggiore o minore rispetto al contenitore in cui deve essere visualizzata, oppure il suo rapporto d'aspetto può essere diverso da quello del contenitore. Considereremo come mostrare un'immagine nel modo migliore.

object-fit

object-fit specifica come un'immagine deve essere ridimensionata per adattarsi al suo contenitore.

object-fit: fill | contain | cover | none | scale-down;

• fill estende l'immagine per riempire il contenitore, indipendentemente dal suo rapporto d'aspetto. Questo può causare il ritaglio o la distorsione dell'immagine;
• contain ridimensiona l'immagine per adattarsi al contenitore mantenendo il suo rapporto d'aspetto. Questo può comportare la presenza di spazi vuoti attorno all'immagine se il contenitore e l'immagine hanno rapporti d'aspetto diversi;
• cover ridimensiona l'immagine per coprire completamente il contenitore mantenendo il suo rapporto d'aspetto;
• none visualizza l'immagine nella sua dimensione originale, indipendentemente dalla dimensione del contenitore. Questo può causare la fuoriuscita dell'immagine dal contenitore;
• scale-down riduce l'immagine per adattarla al contenitore se è più grande della dimensione naturale dell'immagine, oppure la visualizza alla sua dimensione naturale se rientra nel contenitore.

object-position

object-position specifica la posizione dell'immagine all'interno del suo contenitore. Accetta due valori: un valore orizzontale e uno verticale oppure si possono utilizzare parole riservate.

object-position: x y;