时间戳

首页 > 解决方案 > 如何根据屏幕大小更改图像组件？

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

问题描述

我有一个研究案例：

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代码？

标签： javascripthtmlcss

解决方案

您需要为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>

推荐阅读