根据浏览器的屏幕分辨率更改徽标图像

Change logo image based on screen resolution of the browser

本文关键字：图像 分辨率 浏览器 屏幕      更新时间：2023-12-20

我有两个图像，一个是黑色的徽标，另一个是白色的徽标。当浏览器的宽度小于768px时，我希望有白色的徽标，当它更大时，我想有黑色的徽标。我尝试了一些东西，但没有实时更改，只有当我重新加载页面时。

$(function() {
    if($(window).width() < 768){
        $('.logo').find("img").attr("src","/images/Trin-02.png");
    }
    else{
        $('.logo').find("img").attr("src","/images/Trin-01.png");
    }
});

有什么建议吗？感谢

https://api.jquery.com/resize/

您正确地检查了窗口的宽度，但只有在页面首次加载时才进行检查！

相反，每次调整屏幕大小时，使用resize函数运行脚本

$(window).on("resize", function(){
  if($(window).width() < 768){
      $('.logo').find("img").attr("src","/images/Trin-02.png");
  }
  else{
      $('.logo').find("img").attr("src","/images/Trin-01.png");
  }
})

尽管这听起来更像是css媒体查询的工作，尽管我们并不关心您的所有需求和要求：）

您只需使用css和媒体查询就可以做到这一点。

img {
  width: 400px;
  content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}
@media screen and (max-width: 768px) {
  img {
    content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
  }
}
<img alt="">

我有一个纯JavaScript解决方案

document.getElementsByTagName("BODY")[0].onresize = function() {
    if (window.outerWidth < 768) {
        document.getElementById("img").src = yourFirstImage.png;
    } else {
        document.getElementById("img").src = yourSecondImage.png;
    }
}

如果您有矢量版本的徽标，请制作imgname.SVG，然后使用css更改颜色（SVG是可缩放的矢量图形，图像质量良好）

HTML

 <div class="logo"> <a href="index.html"><img src="images/imagename.svg"></a> </div>

CSS

@media only screen and (max-width: 768px) { 
.logo img{
background-color:#000;
height:50px;
width:100%;
}
}

这里是最简单的解决方案，使用CSS3媒体查询，

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>media queries</title>
  <style>
    @media screen and (max-width: 780px) {
    body {
        background-image: url("/images/Trin-02.png");
    }
}
    @media screen and (min-width: 780px) {
    body {
        background-image: url("/images/Trin-01.png");
    }
} 
  </style>
</head>
<body>
</body>
</html>

因此，您可以根据使用的设备获得图像

无需多次瞄准图像。将引用保存一次，然后多次使用。

为resize事件创建一个回调函数并将其绑定。这样，您还可以调用回调函数来在init上设置正确的映像。

var image =  $('.logo').find("img");
function setImage() {
  var windowWidth = window.innerWidth,
      src = (windowWidth < 768) ? '/images/Trin-02.png' : '/images/Trin-01.png';
  image.attr('src', src);
}
$(window).on('resize', setImage);
setImage();

https://jsfiddle.net/0nxdpdp6/1/

相关文章：