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