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!:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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)"/>
<title>Demo</title>
</head>
<body>
<img width='100%' src="http://placekitten.com/{case}/">
<script src="js/metavar.js">
</body>
</html>
Going from worst to best:
IE6-8, these browsers get the "{case}" folder fallback currently
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!)
Firefox, IE10? and chrome, these get the full polyfill experience
None (....yet.....)
Made by @PhilIngrey