CSS La proprietà della posizione dell'oggetto
La proprietà CSS object-positionviene utilizzata per specificare come posizionare un <img> o un <video> all'interno del suo contenitore.
L'immagine
Guarda la seguente immagine di Parigi, che è 400x300 pixel:
Successivamente, utilizziamo object-fit: cover;per mantenere le proporzioni e per riempire la dimensione data. Tuttavia, l'immagine verrà ritagliata per adattarsi, in questo modo:
Esempio
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Utilizzo della proprietà di posizione dell'oggetto
Diciamo che la parte dell'immagine che viene mostrata, non è posizionata come vogliamo. Per posizionare l'immagine, utilizzeremo la object-positionproprietà.
Qui utilizzeremo la object-positionproprietà per posizionare l'immagine in modo che il grande edificio antico sia al centro:
Esempio
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Qui useremo la object-positionproprietà per posizionare l'immagine in modo che la famosa Torre Eiffel sia al centro:
Esempio
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
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-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |