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

Learn More

Picturefill Example - different image based on screen width

Forked from How to use the jQuery $().ready function.

49 Runs 172 Views 35 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 - different image based on screen width</h1>
        <p>Load different image based on screen width (resize window and refresh 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/medium.jpg" data-media="(min-width: 600px)"></span>
            <span data-src="images/large.jpg" data-media="(min-width: 900px)"></span>
            <span data-src="images/extralarge.jpg" data-media="(min-width: 1100px)"></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).