CSS object-position egenskap
- Forrige side CSS object-fit
- Neste side CSS skygger
CSS object-position egenskab bruges til at specificere placeringen af <img> eller <video> i deres container.
billede
Se det nedenstående billede fra Wuhan, med størrelsen 600x400 pixels:
Næste, bruger vi object-fit: cover; for at bevare bredde-højde-forholdet og fylde den givne størrelse. Dog vil billedet blive beskåret for at passe, som vist herunder:
Eksempel
img {
width: 266px;
height: 400px;
object-fit: cover;
}
brug af object-position egenskab
Antag, at den del af billedet, der vises, ikke er på den ønskede placering. For at placere billedet vil vi bruge object-position egenskab.
Her vil vi bruge object-position egenskab til at placere billedet i midten: gamle bygninger
Eksempel
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 50% 100%;
}
Her vil vi bruge object-position Bruk egenskapene til å plassere bildet slik at den berømte Zijin-kirkegården er på høyre side:
Eksempel
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 25% 100%;
}
CSS object-* egenskaper
Følgende tabell viser CSS object-* egenskaper:
| Egenskap | Beskrivelse |
|---|---|
| object-fit | Spesifiser hvordan <img> eller <video> skal justeres i størrelse for å tilpasse seg sin beholder. |
| object-position | Spesifiser hvordan <img> eller <video> skal plasseres innenfor sin 'egen innholdskasse' ved hjelp av x/y-koordinater. |
- Forrige side CSS object-fit
- Neste side CSS skygger
