刷新页面时使用图像更改 div，但响应式，在手机上使用特定图像，在桌面上使用另一个图像

Question

Change the image when refreshed the page, but responsive, with a specific image on the phone and another on the desktop, and I want these images to change every time I update the page in no specific order.

<div id="random-img">
   <div class ="random-desktop">
       <img src="">
   </div>
   <div class ="random-mobile">
      <img src="">
   </div>
</div>

Something like that

function changeImage(imgOrder)   {
            var myImg = ["img/1.png", "img/2.png", "img/3.png", 
           "img/1mini.png", "img/2mini.png", "img/3mini.png" ]; 
            var imageShown = document.body.style.backgroundImage;
            var newImageNumber =Math.floor(Math.random()*myImages.length);
            document.body.style.backgroundImage = 'url('+myImages[newImageNumber]+')';}
        window.onload=changeImage;

Or Like That

var image = new Array ();
image[0] = "";
image[1] = "";
image[2] = "";
image[3] = "";
image[4] = "";
image[5] = "";
image[6] = "";

var size = image.length
var x = Math.floor(size*Math.random())

$('#random-img img').attr('src',image[x]);

Answer 1

An easy solution is to get the screen size and use two array.

function changeImage(imgOrder)   {
   var myImages = ["img/1.png", "img/2.png", "img/3.png"]; 
   var myMiniImg = ["img/1mini.png", "img/2mini.png", "img/3mini.png"];
   var mobileScreenWidth = 728;
   var imageShown = document.body.style.backgroundImage;
   var newImageNumber =Math.floor(Math.random()*myImages.length);
   if (window.innerWidth > mobileScreenWidth) {
      document.body.style.backgroundImage = 'url('+myImages[newImageNumber]+')';
   }
   else {
      document.body.style.backgroundImage = 'url('+myMiniImg[newImageNumber]+')';
   }
}
window.onload=changeImage;

Answer 2

Or just use CSS only? Can you try with below CSS without JS?

#random-img img{
    width:100%;
    height:auto;
} 

Demo: https://jsfiddle.net/4sLnzqh6/

Answer 3

so I managed to solve it and leave it the way I want it, thanks a lot, here is the code:

    <div class="content custom-test-img  position-relative data-banner-1" style="display: none;">
    <picture>
        <source media="(max-width: 375px)" srcset="test.png">
        <source media="(max-width: 640px)" srcset="test.png">
        <source media="(max-width: 1024px)" srcset="test.png">
        <source media="(min-width: 1025px)" srcset="test.png">
        <img src="" alt="">
    </picture>
</div>


<div class="content custom-test-img  position-relative data-banner-2" style="display: none;">
    <picture>
        <source media="(max-width: 375px)" srcset="test.png">
        <source media="(max-width: 640px)" srcset="test.png">
        <source media="(max-width: 1024px)" srcset="test.png">
        <source media="(min-width: 1025px)" srcset="test.png">
        <img src="" alt="">
    </picture>
</div>


<div class="content custom-test-img  position-relative data-banner-3" style="display: none;">
    <picture>
        <source media="(max-width: 375px)" srcset="test.png">
        <source media="(max-width: 640px)" srcset="test.png">
        <source media="(max-width: 1024px)" srcset="test.png">
        <source media="(min-width: 1025px)" srcset="test.png">
        <img src="" alt="">
    </picture>
</div>

require([
    'jquery',
    'mage/cookies',
    'domReady!'
], function ($) {

    $('.custom-test-img').css('display','none')

        if (window.localStorage) {

            let dataBanner = localStorage.getItem('databanner');

            if(dataBanner == null) {
                localStorage.setItem('databanner', 1);
                $('.data-banner-1').css('display', 'block');
            } else {    

                    if (dataBanner == 3 ) {
                            localStorage.setItem('databanner', 1);
                            $('.data-banner-1').css('display', 'block');

                    } else {
                        localStorage.setItem('databanner', +dataBanner+1 );
                        dataBanner = localStorage.getItem('databanner');
                        $('.data-banner-' + dataBanner).css('display', 'block');
                    }
            }
            
        } else {
            console.log("Sorry, your browser do not support local storage.");

            if(dataBannerCookie == '2' || dataBannerCookie == null){
                $.cookie('databanner', '1', { expires: 7, path: '/' });

                console.log(dataBannerCookie + ' - 2 active');
            } else{
                $.cookie('databanner', '2', { expires: 7, path: '/' });
                console.log(dataBannerCookie + ' - 1 active');
            }

        }

});