使用 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>