Proprietà object-position CSS
- Pagina precedente Proprietà object-fit CSS
- Pagina successiva Sfumature CSS
CSS object-position l'attributo viene utilizzato per specificare la posizione di <img> o <video> nel loro contenitore.
immagine
Guarda l'immagine sottostante proveniente da Wuhan, di dimensioni 600x400 pixel:
Successivamente, utilizziamo object-fit: cover; per mantenere il rapporto di aspetto e riempire le dimensioni specificate. Tuttavia, l'immagine verrà ritagliata per adattarsi, come mostrato di seguito:
Esempio
img {
larghezza: 266px;
altezza: 400px;
object-fit: cover;
}
l'attributo object-position
Supponiamo che la parte dell'immagine visualizzata non sia quella desiderata. Per posizionare l'immagine, utilizzeremo object-position proprietà.
Ecco, utilizzeremo object-position proprietà per posizionare l'immagine, in modo che l'antico edificio si trovi al centro:
Esempio
img {
larghezza: 266px;
altezza: 400px;
object-fit: cover;
object-position: 50% 100%;
}
Ecco, utilizzeremo object-position Utilizzare le proprietà per posizionare l'immagine in modo che la famosa Torre angolare del Palazzo del Pechino si trovi a destra:
Esempio
img {
larghezza: 266px;
altezza: 400px;
object-fit: cover;
object-position: 25% 100%;
}
Proprietà CSS object-*
La tabella seguente elenca le proprietà CSS object-*:
| Proprietà | Descrizione |
|---|---|
| object-fit | Specificare come regolare la dimensione di <img> o <video> per adattarsi al contenitore. |
| object-position | Specificare come posizionare <img> o <video> all'interno del loro 'frame di contenuto' tramite coordinate x/y. |
- Pagina precedente Proprietà object-fit CSS
- Pagina successiva Sfumature CSS
