我正在为我的同事在 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);
}
});
不工作....
最佳答案
我稍微修正了你的功能。这应该可以正常工作!
//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>关于javascript - 使用调整浏览器窗口大小的条件更改 img src，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45826107/