Skip to content
A polyfill for the new meta-variable, responsive image proposal
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


This is a polyfill to a responsive image proposal by @MattWilcox, see here for more details.


See here.


Grab the library, and include jQuery and then fire away!:

  <script src=""></script>
  <meta charset=utf-8 />
  <meta name="case" value="500/500" media="only screen and (min-width:0)"/>
  <meta name="case" value="700/700" media="only screen and (min-width:500px)"/>
  <meta name="case" value="1024/1024" media="only screen and (min-width:700px)"/>
  <img width='100%' src="{case}/">
  <script src="js/metavar.js">

Browser Support

Going from worst to best:

Wooden Spoons (and just as responsive)

IE6-8, these browsers get the "{case}" folder fallback currently

Bronze Medalists (CSS media query support)

IE9, Opera and Safari?, these get the correct image for their screen size when the page is loaded, but don't respond to resizing (it's on the todo list!)

Silver Medalists (matchMedia & listeners)

Firefox, IE10? and chrome, these get the full polyfill experience

Gold Medalists (native)

None (....yet.....)

Made by @PhilIngrey

Something went wrong with that request. Please try again.