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 ...

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

Copyrights © 2024 All Rights Reserved by KENJI AGENCY
Terms of use / Privacy Policy / cookie-policy/ P.I. 04498770264
Email: [email protected] - Sitemap