使用页面宽度调整大小更改图像

Question

我需要一些有关此 JavaScript 代码的帮助，我是使用 javascript 的新手，所以当我遇到困难时会很烦人。我想做的是在小屏幕（手机）上更改导航栏上显示的图像，因为导航栏颜色会发生变化。到目前为止，我通过在线搜索得出的结论只有在手动缩小屏幕尺寸然后图像发生应有的变化时才能播放。但是我也希望它在这种状态下加载，这就是我卡住的地方。

$(window).on('resize', function(){
  var win = $(this);
  if (win.width() < 768) { 
      $(".navbar-brand img").attr('src', 'img/icons/logowhite.png');
  } else {
    $(".navbar-brand img").attr('src', 'img/icons/logodark.png');
}});

这是否可以在 css 中完成也是我的一个问题？

Answer 1

Could this be done in the css instead is also a question I have?

CSS 比 Javascript 更容易、更好！

阅读这个问题： Responsive design with media query : screen size?

使用 CSS

更改背景图片的代码

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    div {
        background-image: url("img/icons/logowhite.png");
    }
}
@media only screen and (min-device-width : 768px) {
    div {
        background-image: url("img/icons/logodark.png");
    }
}

Answer 2

demo in fiddle

JS

function resize(){
    if ($(window).width() < 768) { 
      $(".navbar-brand img").attr('src', 'https://www.google.com/images/srpr/chrome_ntp_white_logo2.png');
  } else {
    $(".navbar-brand img").attr('src', 'https://www.google.com/images/srpr/logo11w.png');
  }
}
resize();
$(window).on('resize', resize);

HTML

<div class='navbar-brand'>
    <img src=''/>
</div>

Answer 3

您说的是移动设备。您可能在手机或模拟器中尝试此代码吗？您说代码在手动调整屏幕大小时有效。如果参考手机端的resize事件，不看orientation change事件可能就不行了

看看这个answer是否对你有帮助

使用页面宽度调整大小更改图像

Change image with page width resize

javascript

html

image

resize

width