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


http://dev.w3.org/csswg/css3-images/#object-fit

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.