Pubblicato da: Max
In data:
18 Dic 2021
Tempo di lettura:
Ciao ragazzi! Oggi vedremo come ridimensionare le immagini in modo perfetto con una sola proprietà css: object-fit rispettando l’aspect-ratio e le proporzioni.
Object-fit — Si applica, esclusivamente, ai cosiddetti elementi rimpiazzati, quindi a immagini e video inseriti attraverso i tag <img> e <video>.
Con object-fit possiamo specificare il modo in cui il contenuto di un elemento rimpiazzato si adatta al box che la stessa altezza e larghezza dell’immagine costituiscono. Con object-position possiamo invece intervenire sul posizionamento dell’oggetto nel contesto di questo box.
Vediamo in quale contesto risulta opportuno utilizzare questa proprietà:
Ipotizziamo di voler inserire, all’interno di un container di 650px di larghezza, quattro immagini tutte con larghezza di 600px ma con altezze differenti, e quindi con aspect-ratio diverso. inoltre le immagini devono comparire sulla pagina tutte con dimensione di 300x300px.
Img1
Img2
Img3
Img4
In uno scenario del genere, del resto molto frequente nel lavoro di uno sviluppatore web, la prima cosa che facciamo e creare la struttura html principale, la solita pagina minima html , con un container per le foto e al suo interno inseriamo le immagini.
Le immagini risultano più o meno deformate perché obbligandole tramite il CSS ad assumere le nostre dimensioni, abbiamo perso il rapporto di aspetto originale.
A questo punto possiamo intervenire con object-fit. Per applicare la proprietà è necessario un solo prerequisito: la larghezza e l’altezza con cui vogliamo che sia visualizzata l’immagine devono essere definite nel CSS . Ed è anche opportuno inserire nella regola un overflow:hidden, in questo modo la parte che esce dai limiti del box impostato con larghezza e altezza verrà nascosta.
Come puoi vedere nel video puoi assegnare alla proprietà object-fit uno tra i seguenti valori:
contain
L’immagine si ridimensiona adattandosi alle dimensioni del suo box (la parte con il bordo), mantenendo il suo rapporto di aspetto originale. Vengono anche creati degli spazi in alto e in basso, un po’ come avviene con il cosiddetto letterbox sui video, quello che fa apparire le fasce nere sopra e sotto il filmato quando quest’ultimo ha un rapporto di aspetto diverso rispetto a quello dello schermo.
cover
In questo caso l’immagine si estende su tutta l’area del box, ma per rispettare il rapporto d’aspetto viene ridimensionata e ritagliata quanto necessario.
fill
Rappresenta il valore di default della proprietà, l’immagine riempirà il suo box in altezza e larghezza, e quindi il risultato sarà identico a non assegnare la proprietà object-fit all’immagine.
scale-down
Stesso risultato di contain
none
zoom dell’immagine partendo dalla zona centrale.
Bene! con questo abbiamo concluso. Spero che il mio articolo su come ridimensionare perfettamente un’immagine senza modificarne l’aspetto iniziale, ti sia piaciuto.
Se hai domande, dubbi o se conosci un metodo alternativo, puoi rispondere nei commenti.
Per scaricare i file utilizzati clicca su Download e decomprimi il file Zip.
Se sei interessato a vedere il video-tutorial completo, eccolo:
Ciao alla prossima! 🙂
