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

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

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 2

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

在 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 3

您说的是移动设备。您是在手机还是模拟器中尝试此代码？您说手动调整屏幕大小时代码有效。如果您参考手机上的resize事件，如果您不查看方向更改事件，可能会不起作用。

检查answer 是否对您有帮助