CSS La proprietà della posizione dell'oggetto
La proprietà CSS object-position
viene 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:
![Parigi](https://www.w3schools.com/howto/paris.jpg)
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:
![Parigi](https://www.w3schools.com/howto/paris.jpg)
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-position
proprietà.
Qui utilizzeremo la object-position
proprietà per posizionare l'immagine in modo che il grande edificio antico sia al centro:
![Parigi](https://www.w3schools.com/howto/paris.jpg)
Esempio
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Qui useremo la object-position
proprietà per posizionare l'immagine in modo che la famosa Torre Eiffel sia al centro:
![Parigi](https://www.w3schools.com/howto/paris.jpg)
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" |