CSS La proprietà adatta agli oggetti
La proprietà CSS object-fitviene utilizzata per specificare come ridimensionare un <img> o un <video> per adattarlo al suo contenitore.
La proprietà adatta agli oggetti CSS
La proprietà CSS object-fitviene utilizzata per specificare come ridimensionare un <img> o un <video> per adattarlo al suo contenitore.
Questa proprietà indica al contenuto di riempire il contenitore in vari modi; come "preserva le proporzioni" o "allunga e occupa più spazio possibile".
Guarda la seguente immagine da Parigi. Questa immagine è larga 400 pixel e alta 300 pixel:
Tuttavia, se stiliamo l'immagine sopra in modo che sia la metà della sua larghezza (200 pixel) e la stessa altezza (300 pixel), apparirà così:
Esempio
img {
width: 200px;
height:
300px;
}
Vediamo che l'immagine viene schiacciata per adattarsi al contenitore di 200x300 pixel (le sue proporzioni originali vengono distrutte).
È qui object-fitche entra in gioco la proprietà. La object-fitproprietà può assumere uno dei seguenti valori:
fill- Questa è l'impostazione predefinita. L'immagine viene ridimensionata per riempire la dimensione data. Se necessario, l'immagine verrà allungata o schiacciata per adattarlacontain- L'immagine mantiene le sue proporzioni, ma viene ridimensionata per adattarsi alla dimensione datacover- L'immagine mantiene le sue proporzioni e riempie la dimensione data. L'immagine verrà ritagliata per adattarlanone- L'immagine non viene ridimensionatascale-down- l'immagine viene ridotta alla versione più piccola dinoneocontain
Usando l'adattamento dell'oggetto: copertina;
Se usiamo object-fit: cover;l'immagine mantiene le sue proporzioni e riempie la dimensione data. L'immagine verrà ritagliata per adattarsi:
Esempio
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Usando l'adattamento dell'oggetto: contiene;
Se usiamo object-fit: contain;l'immagine mantiene le sue proporzioni, ma viene ridimensionata per adattarsi alla dimensione data:
Esempio
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Usando l'adattamento all'oggetto: riempimento;
Se usiamo object-fit: fill;l'immagine viene ridimensionata per riempire la dimensione data. Se necessario, l'immagine verrà allungata o schiacciata per adattarsi a:
Esempio
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Utilizzo dell'adattamento all'oggetto: nessuno;
Se usiamo object-fit: none;l'immagine non viene ridimensionata:
Esempio
img {
width: 200px;
height:
300px;
object-fit: none;
}
Usando l'adattamento dell'oggetto: ridimensionamento;
Se utilizziamo object-fit: scale-down;l'immagine viene ridimensionata alla versione più piccola di noneo
contain:
Esempio
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Un altro esempio
Qui abbiamo due immagini e vogliamo che riempiano la larghezza del 50% della finestra del browser e il 100% dell'altezza.
Nell'esempio seguente NON utilizziamo object-fit, quindi quando ridimensioniamo la finestra del browser, le proporzioni delle immagini verranno distrutte:
Esempio
Nel prossimo esempio, utilizziamo object-fit: cover;, quindi quando ridimensioniamo la finestra del browser, le proporzioni delle immagini vengono preservate:
Esempio
Adattamento di oggetti CSS Altri esempi
L'esempio seguente mostra tutti i possibili valori della object-fitproprietà in un esempio:
Esempio
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Oggetto CSS-* Proprietà
La tabella seguente elenca le proprietà CSS oggetto-*:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |