如何根據屏幕大小更改圖像組件？

Question

我有一個研究案例：

我有一個包含在桌面大小的介紹div的圖像，如下所示：

<div class="intro">
            <img id="gambar" src="assets/images/image-intro-desktop.jpg" alt="">
        </div>

然后當輸入移動文件大小時， img標簽將更改為：

<img id="gambar" src="assets/images/image-intro-mobile.jpg" alt="">

那么問題來了，怎么改組件，應該用什么js代碼？？

Answer 1

您可以使用 css 執行此操作

<style>
  .intro{
    content:url("assets/images/image-intro-desktop.jpg");
  }

  @media only screen and (max-width: 600px) {
    .intro{
       content:url("assets/images/image-intro-mobile.jpg");
    }
  }
  </style>

  <img class="intro"/>

Answer 2

您需要為resize和load事件添加兩個事件偵聽器，如果窗口寬度小於更改圖像源所需的斷點，請檢查窗口寬度。 否則將源重置回原始狀態。

 document.addEventListener( 'resize', changeImageSrc() ); document.addEventListener( 'load', changeImageSrc() ); function changeImageSrc() { var init_img_src = document.getElementById('gambar').src; // Change 600 to your breakpoint if( window.innerWidth < 600 ) { document.getElementById('gambar').src = 'https://via.placeholder.com/250'; } else { document.getElementById('gambar').src = init_img_src; } }

 <div class="intro"> <img id="gambar" src="https://via.placeholder.com/550" alt=""> </div>

Answer 3

您要求提供 Javascript 代碼，因此：

也許你可以在window.onload運行它。 取決於你想要什么。

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  // returns true if its a mobile
  // change src here
  document.getElementById('gambar').src = "assets/images/image-intro-mobile.jpg";
}else{
  // returns false if it isn't
}