9

Responsive images as CSS background - Piece of Code - stitcher.io

 3 years ago
source link: https://www.stitcher.io/blog/responsive-images-as-css-background
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Responsive images as CSS background
By continuing your visit to this site, you accept the use of cookies. Read more.

Scout APM helps PHP developers pinpoint N+1 queries, memory leaks & more so you can troubleshoot fast & get back to coding faster. Start your free 14-day trial today.

« back — written by Brent on June 24, 2017

Responsive images as CSS background

Integrating the Responsive Images spec together with CSS backgrounds, allowing for more flexibility for eg. hero images because you can use background-size: cover; etc., and still have the full benefits of responsive image loading.

<html>
<head>
    <style>
        img {
            width:100%;
        }
        img.loaded {
            display: none;
        }
        .responsive-image {
            width:100%;
            height:500px;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="responsive-image">
        <img src="./small.jpg" srcset="./large.png 3000w, ./medium.jpg 1920w, ./small.jpg 425w" >
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const images = document.querySelectorAll('.responsive-image');
            
            [].forEach.call(images, function (imageContainer) {
                const image = imageContainer.querySelector('img');
                
                image.addEventListener('load', function () {
                    if (!image.currentSrc) {
                        return;
                    }
                    
                    imageContainer.style['background-image'] = "url('" + image.currentSrc + "')";
                    image.classList.add('loaded');
                });
            })
        });
    </script>
</body>
</html>

Next up:  Object oriented generators

Follow me: Twitter — RSS — Newsletter — Patreon — GitHub

© 2020 stitcher.io — Cookies & Privacy


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK