使用 javascript 或 jquery 替换图像 URL 和屏幕尺寸小于 740px 时的尺寸

Question

如何使用 javascript 或 jquery 在屏幕尺寸小于 740px 时替换图像 URL 和尺寸？

例如，我想为移动设备显示一个徽标，而为大屏幕显示一个不同的徽标。

 <p>Large Screens:</p> <div class="header__logo d-flex align-items-center w-100" style="max-width: 200px;"> <img style="max-width: 200px;" class="rimage__img rimage__img--fade-in lazyload loaded" data-master="//cdn.shopify.com/s/files/1.png" data-scale="2" itemprop="logo" alt="Crafty" srcset="//cdn.shopify.com/s/files/1.png, //cdn.shopify.com/s/files/1.png" data-was-processed="true"> </div> <p>Small screen</p> <div class="header__logo d-flex align-items-center w-100" style="max-width: 200px;"> <img style="max-width: 40px;" class="rimage__img rimage__img--fade-in lazyload loaded" data-master="//cdn.shopify.com/s/files/2.png" data-scale="2" itemprop="logo" alt="Crafty" srcset="//cdn.shopify.com/s/files/2.png, //cdn.shopify.com/s/files/2.png" data-was-processed="true"> </div>

Answer 1

伪代码：

    if ($(window).width() < 740) {
       alert('Less than 740');
    }
    else {
       alert('More than 740');
    }

您的要求可以通过不同的方式实现。 最简单的就是根据窗口的宽度显示/隐藏相应的 img

Answer 2

首先，您需要避免使用内联样式，因为它可能会在通过样式表进行样式设置时引起麻烦，更不用说可访问性问题等了。

您可以使用 css @keyframes 来实现这一点，但是您询问 javascript 所以看看这个SO

甚至可能从这个MDN开始

享受代码！

编辑（使用 vanilla js 的工作代码示例）：

 if (window.innerWidth < 740) { // if screen is less than 740 px document.querySelectorAll('.header__logo > img')[0].setAttribute('src', '//cdn.shopify.com/s/files/2.png, //cdn.shopify.com/s/files/2.png'); document.querySelectorAll('.header__logo > img')[0].style.maxWidth = '40px'; }

 <div class="header__logo d-flex align-items-center w-100" style="max-width: 200px;"> <img style="max-width: 200px;" class="rimage__img rimage__img--fade-in lazyload loaded" data-master="//cdn.shopify.com/s/files/1.png" data-scale="2" itemprop="logo" alt="Crafty" src="//cdn.shopify.com/s/files/1.png, //cdn.shopify.com/s/files/1.png" data-was-processed="true"> </div>