CSS object-position ominaisuus
- Edellinen sivu CSS object-fit
- Seuraava sivu CSS peittaus
CSS object-position ominaisuus määrittää <img> tai <video> -elementin sijainnin sen konttorissa.
kuva
Tarkastellaan seuraavaa kuvaa, joka on otettu Wuhanista ja sen koossa on 600x400 pikseliä:
Seuraavaksi käytämme object-fit: cover; pitääksemme kuvasuhteen ja täyttääksemme annetun kohteen, kuten seuraavassa kuvassa näkyy:
Esimerkki
img {
width: 266px;
height: 400px;
object-fit: cover;
}
object-position-ominaisuutta
Oletetaan, että näytettävän kuvan osa ei ole haluttu sijainti. Kuvan sijoittamiseksi käytämme object-position ominaisuus。
Tässä käytämme object-position ominaisuutta kuvan sijoittamiseen, jotta vanha rakennus sijaitsee keskellä:
Esimerkki
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 50% 100%;
}
Tässä käytämme object-position Ominaisuudella sijoittaa kuvaa, jotta kuuluisa Pekingin muurin kulmakupla sijoittuu oikealle puolelle:
Esimerkki
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 25% 100%;
}
CSS object-* ominaisuudet
Seuraavassa taulukossa luetellaan CSS object-* ominaisuudet:
| Ominaisuus | Kuvaus |
|---|---|
| object-fit | Määritä, miten <img> tai <video> tulisi sopeuttaa kokoaan sopeutumaan sen konttiin. |
| object-position | Määritä, miten <img> tai <video> tulisi sijoittaa sen 'omassa sisältökehys' sisällä x/y-koordinaateilla. |
- Edellinen sivu CSS object-fit
- Seuraava sivu CSS peittaus
