传递2个背景图像：1个用于移动设备，1个用于PHP桌面，而不必重复HTML内容？

Question

Let's say we need to display 2 different images for mobile and desktop. We would usually do something like this:

HTML

<div class="container"></div>

CSS

.container {
    background-image: url('image-for-mobile.jpg');
}
@media (min-width: 1024px) {
    .container {
        background-image: url('image-for-desktop.jpg');
    }
}

But what happens when we are getting those images from the server? Let's say from Wordpress or any other source?

One way to do it, would be:

HTML

<div class="container for-mobile" style="background-image: url(<?php echo $img_for_mobile; ?>);"></div>
<div class="container for-desktop" style="background-image: url(<?php echo $img_for_desktop; ?>);"></div>

CSS

.for-mobile {
    display: block;
}
.for-desktop {
    display: none;
}
@media (min-width: 1024px) {
    .for-mobile {
        display: none;
    }
    .for-desktop {
        display: block;
    }
}

For obvious reasons, even though this "works" this is not right because we are repeating the markup. What if we have a ton of content inside '.container'? We would have to repeat all that, only to have a different background image.

Another option would probably be passing the variables as data attributes and then with jQuery getting those variables and assigning the right background image in relation to the screen size. Something like this:

HTML

<div class="container" data-mobile="<?php echo $img_for_mobile; ?>" data-desktop="<?php echo $img_for_desktop; ?>"></div>

jQuery

// This is pseudo code, not tested
var imgForMobile = $('.container').data('mobile');
var imgForDesktop = $('.container').data('desktop');

$(window).on('resize', function() {
    if ($(window).width() < 1024) {
        $('.container').css('background-image', 'url(' + imgForMobile + ')');
    }
    else {
        $('.container').css('background-image', 'url(' + imgForDesktop + ')');
    }
});

How could we attack this situation in a more elegant and proper way? Any thoughts would be much appreciated. Thanks in advance!

Answer 1

The correct way:

This is what image srcset is for!

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

If I had to guess though, I think you would benefit from using this and object-fit together. Do you want the background image to be sized to cover?

If so, this is way the super responsive and efficient way to do this:

.container {
    position: relative;
}
.container img {
    position: absolute; 
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}    

<div class="container">

    <img srcset="elva-fairy-320w.jpg 320w,
                 elva-fairy-480w.jpg 480w,
                 elva-fairy-800w.jpg 800w"
         sizes="(max-width: 320px) 280px,
                (max-width: 480px) 440px,
                800px"
         src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">        

</div>

The older server side way:

If you really wanted to do it in PHP like you have in the example, this is the pattern we use for things like this in WordPress.

$image = 'desktop.jpg';

switch (true) {
    case wp_is_mobile() :
        $image = 'mobile.jpg';
        break;
}

<div class="container" style="background-image: url(<?php echo $image; ?>);"></div>