刷新頁面時使用圖像更改 div，但響應式，在手機上使用特定圖像，在桌面上使用另一個圖像

Question

刷新頁面時更改圖像，但響應式，在手機上使用特定圖像，在桌面上使用另一個圖像，我希望每次更新頁面時這些圖像都會更改，沒有特定順序。

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

類似的東西

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;

或者像那樣

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

一個簡單的解決方案是獲取屏幕大小並使用兩個數組。

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

還是只使用 CSS ？ 您可以在沒有 JS 的情況下嘗試使用下面的 CSS 嗎？

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

演示： https://jsfiddle.net/4sLnzqh6/

Answer 3

所以我設法解決了它並按照我想要的方式保留它，非常感謝，這里是代碼：

    <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');
            }

        }

});