CSS: le proprietà Object-Fit e Position

Titolo: CSS: le proprietà Object-Fit e Position
Sezione: web
Data: 21.09.2018

In questo articolo parleremo di due proprietà CSS che molti sviluppatori web non ...

In questo articolo parleremo di due proprietà CSS che molti sviluppatori web non conoscono. Si chiamano object-fit e object-position ed entrambi hanno a che fare con lo styling di immagini e video.Vediamo come possono essere utilizzati.

Object-fit
Con l’object-fit possiamo affrontare il modo in cui un’immagine (o video) si allunga o si schiaccia per riempire la sua casella . Ciò è necessario quando una foto che abbiamo ha una dimensione o proporzioni diverse dal contenitore che la contiene. Tradizionalmente, per risolvere questo problema si crea un div e si impostano le immagini di sfondo e le dimensioni dello sfondo. I moderni CSS, tuttavia, ci permettono  di aggiungere un tag immagine, impostarlo come al solito, e quindi applicare l’object-fit direttamente al selettore immagini:

img {
with: 100%;
oggetto-fit: cover;
}
I possibili valori sono:

fill (predefinito) – La larghezza e l’altezza dell’immagine corrispondono a quelle del contenitore. Il più delle volte questo elimina le proporzioni.
cover – L’immagine mantiene le proporzioni e riempie l’intera scatola, alcune parti sono ritagliate e non saranno visibili.
contain – L’immagine mantiene le proporzioni e si adatta al contenitore.
none – Dimensioni e proporzioni originali.
scale-down – Visualizza come uno dei precedenti, a seconda di quale produce l’immagine di dimensioni più ridotte.

Object-position
Questa proprietà definisce dove all’interno del contenitore verrà posizionata l’immagine. Assume due valori numerici, uno per l’asse superiore e uno per l’asse sinistra-destra. Questi numeri possono essere in percentuali, pixel o altre unità di misura e possono essere negativi. Sono inoltre utilizzate anche alcune parole chiave come center, top, right, ecc.

Di default un’immagine è posizionata al centro di un contenitore, quindi il valore predefinito è:

img {
Object-position: center;
/ * che è uguale a * /
Object-position: 50% 50%;
}

Supporto del browser
Il supporto del browser per l’object-fit e l’object-position è piuttosto incoerente e  come al solitoIE e Edge che non offrono alcun supporto. In attesa che tutti i browser Microsoft adottino le due proprietà, è possibile utilizzare la libreria polyfill che risolve il problema .

Conclusione
Le proprietà object-fit e object-position possono essere di grande aiuto quando si creano pagine Web che dovono essere responsive.  Siamo sicuri che una volta che IE e Edge li adotteranno, diventeranno rapidamente parte degli strumenti CSS di ogni sviluppatore web.

Kenji Agency : realizzazione  siti web a Treviso