object-fit property - CSS

Lær at brug CSS object-fit property så indhold på hjemmesiden kan strækkes til at fylde det hele

Introduktion

Sætter man et <video> element til 100% i bredden og højden med CSS betyder det ikke at selve videobilledet får samme bredde/højde som <video> elementet.

Det kan ses her hvor controls attributten er brugt.

<video> er bredere end videobilledets størrelse <video> er højere end videobilledets størrelse
Grunden til de tomme områder (kolonner/bjælker) er at videoen som standard beholder sin aspect ratio.

Hvis videoen er i 4:3 format og vises på en 16:9 skærm i fuldskærm så vil der være tomme områder til venstre og højre om videoen.
Hvis videoen er i 16:9 format og vises på en 4:3 skærm i fuldskærm så vil der være tomme områder over og under videoen.

Videobilledet har dermed ikke nødvendigvis samme bredde/højde som <video> afspilleren.

For at få videobilledet trukket ud i samme størrelse som <video> tagget kan man bruge CSS koden object-fit: fill.

Kan bruges på <video> <object> <img> <input type=image> <svg> <svg:image> <svg:video>.

Demo

Standard
object-fit: fill


VIDEO I 100% BREDDE OG HØJDE MED "OBJECT-FIT: FILL" DEMO

Browserunderstøttelse af CSS object-fit

Browser Object-fit
Firefox logo
Firefox 36
ja
Opera logo
Opera 12.15
ja
Safari logo
Safari 5.1.7
nej
Chrome logo
Chrome 25.0.1364.172 m
nej
Internet Explorer logo
Internet Explorer 10.0.9200.16540
nej
Alle tests er udført på Windows 7 (64-bit)


1
Browserunderstøttelse fra caniuse.com :

Kode eksempel


w3.org
Siden er sidst opdateret mandag 25. juni 2018