Skip to content

Instantly share code, notes, and snippets.

@megurock

megurock/pictuerfill-test.html

Created October 7, 2014 09:54
Show Gist options
  • Save megurock/6d4732def4e036b9c886 to your computer and use it in GitHub Desktop.
Save megurock/6d4732def4e036b9c886 to your computer and use it in GitHub Desktop.
Download ZIP
picturefill 1.2 exmaple
Raw
pictuerfill-test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Picturefill 1.2 Example</title>
<link rel="stylesheet" href="css/main.css">
<!--[if IE 9]><script src="js/vendor/matchMedia.js"></script><![endif]-->
<script src="js/vendor/picturefill.js"></script>
</head>
<body>
<span data-picture data-alt="cat">
<span data-src="img/cat-400.jpg"></span>
<span data-src="img/cat-600.jpg" data-media="(min-width: 600px)"></span>
<span data-src="img/cat-800.jpg" data-media="(min-width: 800px)"></span>
<span data-src="img/cat-1000.jpg" data-media="(min-width: 1000px)"></span>
<span data-src="img/cat-1200.jpg" data-media="(min-width: 1200px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="img/cat-400.jpg" alt="cat">
</noscript>
</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment