CSS objek-pas eiendom
Voorbeeld
Sny die kante van 'n prent af, behou die aspekverhouding, en vul die spasie in:
img.a {
width: 200px;
height:
400px;
object-fit: cover;
}
Definisie en gebruik
Die object-fit
eiendom word gebruik om te spesifiseer hoe 'n <img> of <video> grootte aangepas moet word om by sy houer te pas.
Hierdie eienskap vertel die inhoud om die houer op 'n verskeidenheid maniere te vul; soos "behou daardie aspekverhouding" of "rek uit en neem soveel spasie as moontlik op".
Standaard waarde: | sien individuele eiendomme |
---|---|
Geërf: | geen |
Animateerbaar: | geen. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.objectFit="cover" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Property | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS-sintaksis
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Eiendomswaardes
Value | Description | Try it |
---|---|---|
fill | This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit | |
contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box | |
cover | The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit | |
none | The replaced content is not resized | |
scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Verwante bladsye
CSS-tutoriaal: CSS-objekpas
CSS verwysing: CSS objek-posisie
HTML DOM-verwysing: Die objectFit-eienskap