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:
- object-fit
- object-position
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
- Valore iniziale:
fill - Applicato a: elementi rimpiazzati
Vediamo nello specifico le diverse proprietà:
- contain: L'immagine viene ridimensionata, adattandosi alle dimensioni del suo contenitore, mantenendo il suo aspect ratio.
- cover: L'immagine si espande per tutta l'area del box. Per mantenere il suo aspect ratio viene ritagliata e ridimensionata quanto è necessario.
- fill: E' il valore iniziale. Viene applicato questo valore se la proprietà stessa non venisse applicata, perdendo il suo aspect ratio.
- none: L'immagine conserva le sue dimensioni intrinseche originali, si espande per tutta la dimensione del contenitore, a partire dall'area centrale.
- scale-down: Esito simile alla proprietà
contain
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.
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.
La proprietà Object-fit risolve il problema. Vediamo i diversi esempi.
object-fit: contain
object-fit: contain;
object-fit: cover
object-fit: cover;
object-fit: fill
object-fit: fill;
object-fit: none
object-fit: none;
object-fit: scale-down
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;
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.
