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

Posted 2023-03-06

【中文标题】使用页面宽度调整大小更改图像

【英文标题】：Change image with page width resize

【发布时间】：2015-06-19 11:06:51

【问题描述】：

我需要一些关于这段 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 中完成也是我的一个问题？

【参考方案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>

【讨论】：

我有同样的问题，如果我通过拖动它来减小窗口大小，它可以完美地工作。但是当浏览器负载已经减少时，它不会显示更改，直到窗口宽度发生变化

很快我也有代码可以在滚动时更改图标，我只在大显示器上使用它。他们有什么方法可以让这个脚本在超过 768 宽度时才起作用。 $(window).scroll(function() if ($(".navbar").offset().top > 50) $(".navbar-brand img").attr('src', 'img/icons/logowhite.png'); else $(".navbar-brand img").attr('src', 'img/icons/logodark.png'); );

【参考方案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");
    

【讨论】：

我读过。我正在使用媒体查询来更改所有导航栏背景颜色和链接颜色。但我不知道如何使用它来将 img 更改为不同的 img 以实现我正在寻找的内容。你有什么建议吗？

【参考方案3】：

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

检查answer 是否对您有帮助

【讨论】：

我只是通过拖动浏览器来调整它的大小以查看它是否正常工作，然后我会在我的 iPhone 上尝试以确保它在手机上显示出我想要的效果

如果是手机，我强烈建议您按方向搜索。还有媒体查询可以让您的生活更轻松！例如检查这个！ davidwalsh.name/orientation-change