通过调整浏览器窗口大小来更改 img src答案

【问题标题】：Changing img src with resizing browser window condition通过调整浏览器窗口大小来更改 img src
【发布时间】：2018-01-31 05:45:54
【问题描述】：

我正在为我的同事在 WordPress cms 上创建一个网站，并且我对主题做了一些更改。

我的问题是，如何通过调整窗口大小（响应式）来更改图像 src？

我的标志图片：

<a href="http://www.ewacieslikiewicz.com/" class="eram-logo" rel="home" 
itemprop="url"><img src="http://www.ewacieslikiewicz.com/wp-
content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png" 
alt="EWA CIEŚLIKIEWICZ" class="ol-retina"></a>

这个网站上有人写道，下面的代码是完美的：

 $(function resize(){
     if ($(window).width() < 768) { 
      $(".eram-logo img").attr('src', 'http://www.ewacieslikiewicz.com/wp-content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png');
 } else {
      $(".eram-logo img").attr('src', 'http://emonitoring.poczta-polska.pl/hermes/themes/poczta-polska/skin/logo.png');
  }
}
resize();
$(window).on('resize', resize);
    }
});

不工作....

【问题讨论】：

CSS 技巧：figuring out responsive images
嗯，你在 document.ready 中定义了 resize....

标签： javascript html wordpress responsive-design responsive

【解决方案1】：

这不需要任何 jQuery 就可以工作（我喜欢尽可能减少外部依赖）：

function resizeListener(e){
  var greaterThanSrc = 'test1';
  var lessThanSrc = 'test2';
  var el = document.querySelector('.eram-logo img');
  var curSrc = el.src;
  if (window.innerWidth < 768 && curSrc != lessThanSrc)
      el.src = lessThanSrc;
  else if (window.innerWidth > 768 && curSrc != greaterThanSrc)
      el.src = greaterThanSrc;  
}

window.addEventListener('resize', resizeListener);

【讨论】：

【解决方案2】：

我稍微修正了你的功能。这应该可以正常工作！

//resize function
function resize() {
  if ($(window).width() < 768) {
    $(".eram-logo img").attr(
      "src",
      "http://www.ewacieslikiewicz.com/wp-content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png"
    );
  } else {
    $(".eram-logo img").attr(
      "src",
      "http://emonitoring.poczta-polska.pl/hermes/themes/poczta-polska/skin/logo.png"
    );
  }
}

//function call when window resized
$(window).on("resize", resize);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <title>Document</title>
</head>

<body>
  <a href="http://www.ewacieslikiewicz.com/" class="eram-logo" rel="home" itemprop="url">
    <img src="http://www.ewacieslikiewicz.com/wp-content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png" alt="EWA CIEŚLIKIEWICZ" class="ol-retina">
  </a>
</body>

</html>

【讨论】：

【解决方案3】：

试试这个：

$(function() {
$(window).resize(function() {
    if ($(window).width() < 768) {
            $(".eram-logo img").attr('src', 'http://www.ewacieslikiewicz.com/wp-content/uploads/2017/08/cropped-Zrzut-ekranu-2017-07-11-o-13.13.20.png');
        }
        else {
            $(".eram-logo img").attr('src', 'http://emonitoring.poczta-polska.pl/hermes/themes/poczta-polska/skin/logo.png');
        }
    });
});

【讨论】：