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

Learn More

Picturefill Example - with custom CSS for each image

Forked from Picturefill Example - different image based on screen width.

329 Runs 1194 Views 206 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>
        <style>
            .img-small img{border:2px solid red;}
            .img-medium img{border:2px solid green;}
            .img-large img{border:2px solid blue;}
            .img-extralarge img{border:2px solid yellow;}
        </style>
    </head>
    <body>
        <h1>Picturefill Example - with custom CSS for each image</h1>
        <p>Load different image based on screen width (resize window to test).</p>
        <span data-picture data-alt="This is the alt title of the image">
            <span class="img-small" data-src="images/small.jpg"></span>
            <span class="img-medium" data-src="images/medium.jpg" data-media="(min-width: 600px)"></span>
            <span class="img-large" data-src="images/large.jpg" data-media="(min-width: 900px)"></span>
            <span class="img-extralarge" 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).