如何根据屏幕大小更改图像组件？

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
}