Fit - Position: ridimensionare e posizionare immagini con i CSS

Ridimensionare e posizionare immagini con object-fit e object-position
Ridimensionare e posizionare immagini con object-fit e object-position

Una immagine, in una pagina web, dovrebbe essere posizionata con le dimensioni desiderate, mantenendo il suo aspect ratio, evitando che la stessa appaia deformata o schiacciata.

Inizialmente, questa cosa non è stata possibile ottenerla attraverso i fogli di stile. Oggi, invece, il problema può essere risolto grazie alla proprietà dei CSS3 Object-fit.

La proprietà object-fit specifica il modo in cui il contenuto di un elemento rimpiazzato deve essere ridimensionato nel suo contenitore, stabilito dalla sua altezza e dalla sua larghezza.

background-size e background-position sono dichiarazioni tra le più utilizzate e proprio sulla scorta di queste, ultimamente ne sono state rilasciate altre due:

Si applicano entrambe agli elementi rimpiazzati. Innanzitutto alle immagini ed ai video.

Cosa sono gli elementi rimpiazzati

Un elemento rimpiazzato è un elemento le cui dimensioni e contenuto sono definiti al di fuori dei CSS.

Gli elementi rimpiazzati spesso hanno dimensioni intrinseche: la larghezza e l'altezza definite dall'elemento stesso, non imposte dall'ambiente che lo circonda o definite nei CSS. Ad esempio, un'immagine bitmap ha una larghezza ed un'altezza intrinseca specificata in unità assolute e da cui è possibile determinare il rapporto intrinseco.

L'elemento rimpiazzato per "eccellenza" è <img> (immagine). Altri esempi di elementi rimpiazzati sono <textarea>, <input>, <select>, <object>.

Dimensionamento degli elementi rimpiazzati con Object-fit

Spesso, in una pagina web, si vorrebbero avere le immagini (ma anche video ed input ecc.) con gli stessi valori in larghezza ed altezza. Le immagini visualizzate nella pagina potrebbero non avere le stesse dimensioni, per non parlare del rapporto proporzionale di aspect ratio.

Questo è particolarmente comune nelle applicazioni in cui l'utente può caricare e utilizzare le proprie immagini che devono adattarsi a delle dimensioni predefinite.

Utilizzando la proprietà object-fit, è possibile inserire il contenuto di un'immagine delle dimensioni specificate nel foglio di stile.

Il contenuto può essere impostato per avere dimensioni aumentate o diminuite, ridotte o allungate, a seconda di come è necessario, per adattarsi alla larghezza e all'altezza specificate, utilizzando i diversi valori della proprietà.

Sintassi Ufficiale

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

Vediamo nello specifico le diverse proprietà:

Esempi con la proprietà Object-fit

Effettuaiamo qualche esempio con le diverse proprietà.

Le dimensioni originali dell'immagine seguente sono di 960px in larghezza e di 594px in altezza. Per motivi di spazio, le ho ridotte rispettivamente del 50%. Vale a dire, larghezza 480px. Altezza 297px.

Immagine ridimensionata del 50%

Se volessimo ridurre di un ulteriore 50% la larghezza, mantenendo la stessa altezza, il risultato non sarà dei migliori. Avremo una immagine schiacciata, oltre alla perdita del suo aspect ratio.

Perdita dell'aspect ratio sull'immagine

La proprietà Object-fit risolve il problema. Vediamo i diversi esempi.

object-fit: contain

object-fit: contain;
Proprietà Object Fit

object-fit: cover

object-fit: cover;
Proprietà Object Fit Cover

object-fit: fill

object-fit: fill;
Proprietà Object Fit Fill

object-fit: none

object-fit: none;
Proprietà Object Fit None

object-fit: scale-down

object-fit: scale-down;
Proprietà Object Fit Scale-Down

Object-position

La proprietà object-position la si potrebbe definire complementare ad object-fit.

object-position funziona nella stessa ed identica maniera di background-position. L'oggetto da posizionare prende come riferimento l'angolo superiore sinistro del suo contenitore.

Riprendiamo un esempio visto precedentemente, object-fit: cover;, al quale associamo anche la proprietà object-position.

object-fit: cover; 
object-position: 100% 0;
Object Position 100%

L'immagine, come si può vedere, è spostata tutta verso la sua destra. Se 0 (zero) è il punto di inizio superiore sinistro, 100% sarà il suo opposto sul lato destro.

Con object-position si possono impostare anche valori negativi. Infatti abbiamo:

object-fit: cover;

object-position: -50px 0;

Il lato sinistro dell'immagine viene spostato, verso sinistra appunto, di 50px. Come se al lato destro della stessa fosse applicata una "forza" che spinge l'oggetto al di fuori del div contenitore con bordo orange, della misura impostata nella proprietà object-position. In questo caso il valore negativo è 50px.

Supporto browser

Per quanto riguarda il supporto browser, basta visitare Can I Use e rendersi conto di come la proprietà object-fit viene interpretata dagli user agent. Di seguito una screenshot.

Can I Use object-fit/object-position