Speed up development with full-stack environments for every branch.

Learn More

Picturefill Example - screen width and pixel ratio

Forked from Picturefill Example - with custom CSS for each image.

57 Runs 415 Views 124 Copies
Saved

Saved

gtsolutions 373

gtsolutions
published 4 years ago

<html>
    <head>
        <meta charset="utf-8">
        <title>Picturefill Examples</title>
        <script src="js/matchmedia.js"></script>
        <script src="js/picturefill.js"></script>
    </head>
    <body>
        <h1>Picturefill Example - screen width and pixel ratio</h1>
        <p>Load different image based on screen width and pixel ratio (resize window to test).</p>
        <span data-picture data-alt="This is the alt title of the image">
            <span data-src="images/small.jpg"></span>
            <span data-src="images/small-x2.jpg" data-media="(min-device-pixel-ratio: 2.0)"></span>
            <span data-src="images/medium.jpg" data-media="(min-width: 600px)"></span>
            <span data-src="images/medium-x2.jpg" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></span>
            <span data-src="images/large.jpg" data-media="(min-width: 900px)"></span>
            <span data-src="images/large-x2.jpg" data-media="(min-width: 900px) and (min-device-pixel-ratio: 2.0)"></span>
            <!-- Fallback content for non-JS browsers.-->
            <noscript><img src="images/small.jpg" alt="This is the alt title of the image"></noscript>
        </span>
    </body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).