CSS object-fit -ominaisuus
- Edellinen sivu CSS kuvatyylit
- Seuraava sivu CSS object-position
CSS object-fit Ominaisuus määrittää, miten <img> tai <video> -elementin kokoa säätää sen sopimaan säiliöön.
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.
| Ominaisuus | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS object-fit -ominaisuus
CSS object-fit Ominaisuus määrittää, miten <img> tai <video> -elementin kokoa säätää sen sopimaan säiliöön.
Tämä ominaisuus kertoo, miten sisältö täytetään säiliöön. Esimerkiksi "säilytä pituusleikkaus" tai "levitä ja käytä mahdollisimman paljon tilaa".
Katso alla oleva Shanghai Flower Portin krokosmin kuva, joka on 300x300 pikseliä:
Mutta jos asetamme yllä olevan kuvan 200x300 pikseliin, se näyttää tältä:
Esimerkki
img {
leveys: 200px;
korkeus: 300px;
}
Näemme, että kuva puristetaan sopimaan 200x300 pikselin säiliöön, ja alkuperäinen pituusleikkaus tuhoutuu.
Jos käytämme object-fit: cover;Se leikkaa kuvan sivut, säilyttää pituusleikkauksen ja täyttää tilan seuraavasti:
Esimerkki
img {
leveys: 200px;
korkeus: 400px;
object-fit: cover;
}
Toinen esimerkki
Tässä meillä on kaksi kuvaa, joita haluamme täyttävän selaimen 50 %:n leveyden ja 100 %:n korkeuden.
Seuraavassa esimerkissä emme käytä object-fitSiksi kuvan pituusleikkaus tuhoutuu, kun säätämme selaimen ikkunaa:
Esimerkki
Seuraavassa esimerkissä käytämme object-fit: cover;Siksi säilytämme kuvan pituusleikkauksen, kun säätämme selaimen ikkunaa:
Esimerkki
Kaikki CSS object-fit -attribuutin arvot
object-fit Atribuutti voi hyväksyä seuraavat arvot:
fill- Oletusarvo. Muuta korvattavan sisällön kokoa täyttääksesi elementin sisäisen kehyksen. Tarvittaessa venytä tai purista esinettä sopimaan objektiin.contain- Käännä korvattavaa sisältöä säilyttääksesi sen pituusleikkaus, kun se lisätään elementin sisäiseen kehykseen.cover- Muuta korvattavan sisällön kokoa säilyttääksesi sen pituusleikkaus, kun täytät täyttöelementin koko sisäisellä kehyksellä. Objekti leikataan sopimaan.none- Ei muuteta korvaavan sisällön kokoonpanoa.scale-down- Sisällön kokoonpanon muuttaminen, kuin sisältöä ei olisi määritelty tai sisältöä sisältävä (tämä johtaa pienempiin konkreettisiin objektiivikokoisiin)
Seuraavat esimerkit osoittavat object-fit Ominaisuuden kaikki mahdolliset arvot:
Esimerkki
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- Edellinen sivu CSS kuvatyylit
- Seuraava sivu CSS object-position
