Question

我有两张图片，一张是黑色徽标，另一张是白色徽标。当浏览器的宽度小于768像素时，我希望有白色标识，当它更大时，我想要黑色标识。我尝试了一些但实际上并没有改变，只有当我重新加载页面时。

raw

有什么建议吗？谢谢

Answer 1

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媒体查询的工作，但我们并不了解您的所有需求和要求：）

Answer 2

您只需使用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="">

Answer 3

我有一个纯JavaScript解决方案

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

Answer 4

如果您有徽标的矢量版本，请创建 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%;
}
}

Answer 5

这是使用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>

所以，你可以有图像acc。到你正在使用的设备

Answer 6

无需多次定位图像。保存一次引用，多次使用。

为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/

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

6 个答案: