Question

我环顾四周但什么也没找到，我想知道当你试图建立一个响应式网站时，是否有可能改变标题的img？

例如：当屏幕宽度超过800px时显示正常img，当你低于800px时，用另一个替换img。

谢谢！

Answer 1

您可以使用CSS3媒体查询来实现响应式网页设计。

我们假设您有一个ID为：headerID

的标头

默认css：

 #headerId {
        background: url("default-image-url.png");
    }

然后您只需将以下内容添加到CSS文件中：

@media (max-width: 800px) {
    #headerId {
        background: url("different-image-url.png") !important;
    }
}

然后在<head>添加

的HTML中

<meta name="viewport" content="width=device-width">

Answer 2

使用JQuery，它将是：

if ($(window).width() < 800) {
   $('#divID').css("background-image", "url(/myimage.jpg)");
   //image when windows is less than 800px  
}
else {
   $('#divID').css("background-image", "url(/myimage.jpg)");
   //image when windows is more than 800px  
}

Answer 3

除非您使用javascript，否则无法使用一个<img>代码执行此操作。

只使用CSS，你需要使用mohamedrias所说的背景图像，或者使用媒体查询根据屏幕宽度显示或隐藏一个图像：

@media (max-width: 800px) {
    #headerImg1 {
        display: none;
    }
    #headerImg2 {
        display: block;
    }
}

@media (min-width: 801px) {
    #headerImg1 {
        display: block;
    }
    #headerImg2 {
        display: none;
    }
}

响应头部图像 - 用css更改图像

3 个答案: