Proprietà CSS Object-FIT e Object-Position | Spiegato

Oltre alle immagini di styling, video o altri contenuti di tale tipo che appaiono nelle pagine Web, designarne la soluzione e la posizione giuste sono altamente cruciali quando si progettano la struttura di un sito Web. Alcune proprietà sono state fornite in CSS che ti consentono di eseguire queste attività con grande facilità e semplicemente una singola riga di codice. Abbiamo arruolato queste proprietà di seguito.

1. Proprietà a fit oggetto
2. Proprietà dell'oggetto

Ci immerciamo nelle loro profondità sotto.

Proprietà a fit oggetto

Allo scopo di specificare come verrà ridimensionato un video o un'immagine che appare in una pagina Web per regolare il suo contenitore, viene utilizzata la proprietà oggetto-fit. Questa proprietà descrive sostanzialmente come un elemento agirà quando le dimensioni del contenitore lo mantengono.

Sintassi

Object-Fit: nessuno | riempire | Copertura | contenere | Scale-down | iniziale | ereditare;

Tutti questi parametri sono spiegati nella tabella seguente.

Parametri	Descrizione
nessuno	Questo valore non ridimensiona il contenuto.
riempire	Questo è un valore predefinito che farà riempire il contenuto il suo contenitore allungando o spremendo.
copertina	Viene utilizzato per far riempire il contenuto il suo contenitore, preservando il suo proporzione.
contenere	Viene inoltre utilizzato per far riempire il contenuto del contenuto tagliando il suo rapporto di aspetto.
rimpicciolire	Questo valore eredita le proprietà del valore nessuno o contiene un valore.
iniziale	Questo valore imposta la proprietà sul suo valore predefinito.
ereditare	Eredita la proprietà dal suo elemento predecessore.

Esploriamo ulteriormente la proprietà degli oggetti con l'aiuto di esempi.

Esempio

Per comprendere meglio i vari valori della proprietà Object-Fit, incorporano prima un'immagine nella nostra pagina Web utilizzando HTML.

Html

Qui abbiamo aggiunto un'immagine nell'attributo SRC del tag.

Produzione

Un'immagine è stata incorporata nella pagina web.

Ora esploriamo diversi parametri della proprietà oggetto-fit e vediamo cosa fanno all'immagine sopra.

Riempire

Qui abbiamo impostato un po 'di larghezza e altezza dell'immagine e la proprietà oggetto-fit è stato fornito il valore di riempimento che farà adattare l'immagine nel suo contenitore stringendo o stretching.

img
larghezza: 200px;
Altezza: 300px;
Object-Fit: riempimento;

Produzione

L'immagine è stata schiacciata per riempire il suo contenitore.

Copertina

Il valore di copertura della proprietà oggetto-fit taglierà i lati delle immagini e si adatterà all'interno del contenitore mantenendo il suo proporzione.

img
larghezza: 200px;
Altezza: 300px;
Object-Fit: copertura;

Produzione

Il parametro di copertura funziona correttamente.

Contenere

Oltre a dare un po 'di larghezza e altezza all'immagine, abbiamo messo in contatto la proprietà oggetto-fit che taglia l'immagine nel contenitore preservando il suo rapporto.

img
larghezza: 200px;
Altezza: 300px;
Object-Fit: contenere;
bordo: 5px blu solido;

Produzione

L'immagine è stata ritagliata con successo.

Rimpicciolire

Il parametro di scala in giù della proprietà oggetto-fit eredita le proprietà dal parametro di copertura o il parametro contenere.

img
larghezza: 200px;
Altezza: 300px;
Object-Fit: scala in giù;
bordo: 5px blu solido;

Produzione

Il valore in scala in giù funziona correttamente.

Proprietà dell'oggetto

Al fine di specificare come un elemento (in particolare un'immagine o un video) dovrebbe essere posizionato lungo la dimensione orizzontale o verticale all'interno del suo contenitore, viene utilizzata la proprietà dell'oggetto. Questa proprietà viene sempre utilizzata insieme alla proprietà.

Sintassi

Object-Position: Posizione | iniziale | ereditare;

Il parametro di posizione descrive la posizione dell'immagine o del video lungo gli assi X e Y. Può essere una stringa come sinistra, a destra, al centro o in un numero in pixel o percentuale.

Per una migliore comprensione, ecco un esempio della proprietà dell'oggetto. Consideriamo l'immagine usata negli esempi sopra. Ai fini di definire la sua posizione insieme a come verrà ridimensionato per adattarsi al suo contenitore, utilizzare il seguente frammento di codice.

CSS

img
larghezza: 200px;
Altezza: 300px;
Object-Fit: contenere;
Posizione oggetto: 1% 90%;
bordo: 5px blu solido;

Nel codice sopra, stiamo impostando la proprietà oggetto-fit in modo da contenere, il che significa che l'immagine verrà ritagliata all'interno del contenitore mantenendo il suo rapporto di aspetto. Nel frattempo, le posizioni in alto e sinistra dell'immagine sono state assegnate all'1%, mentre le posizioni in basso e destra sono state assegnate al 90%. Infine, al bordo del contenitore è stato somministrato 5px con un colore blu massiccio.

Produzione

La proprietà dell'oggetto è stata implementata correttamente.

Conclusione

CSS fornisce Proprietà di opzioni oggetto e posizione che aiutano a impostare le dimensioni delle immagini. La proprietà oggetto-fit descrive come un video o un'immagine verrà ridimensionato per regolare il suo contenitore, nel frattempo, la proprietà dell'oggetto definisce come un elemento (in particolare un'immagine o un video) dovrebbe essere posizionato lungo la dimensione orizzontale o verticale all'interno il suo contenitore. Entrambe queste proprietà insieme a vari valori che questi possono renderla sono stati dimostrati in questo post attraverso esempi.