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, ignorando il rapporto d'aspetto (può distorcere);
• contain: ridimensiona l'immagine per adattarsi all'interno del contenitore mantenendo il rapporto d'aspetto (può lasciare spazi vuoti);
• cover: riempie completamente il contenitore mantenendo il rapporto d'aspetto (può ritagliare);
• none: utilizza la dimensione originale dell'immagine; può fuoriuscire dal contenitore;
• scale-down: utilizza la dimensione minore tra none o contain (dimensione originale o ridotta per adattarsi).

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;