Html CSS-流体网格布局网站的不同标题图像

编辑：进一步阅读接下来的5行！我的问题不是为移动设备、平板电脑和桌面使用不同css的逻辑（

@media

query）——问题是从css内部更改

IMAGE.SRC

属性

我正在尝试创建一个新的fluid网站，并尝试创建3个不同的标题图像：

移动标题图像（低分辨率）

平板电脑标题图像（中等分辨率）

桌面标题图像（高分辨率）

（所有图像的纵横比也不同）

我怎样才能让它工作

目前，我试图简单地更改CSS中每个CSS部分（手机、平板电脑、桌面）的SRC

像这样：

#img_header {
   src: url(img/header_m.png);
}

我们都知道这是行不通的：D我也不想用背景图像来代替

正确的方法是什么

我是否应该侵入AdobeDreamweaverCS6生成的javascript代码并从中更改.src

我确信有一种css方法，所以告诉我伙计们。谢谢

更新：我应该说我已经使用了媒体查询

这是我的css：

/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 97.826%;
    padding-left: 1.0869%;
    padding-right: 1.0869%;
}

#div_header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#img_header {
    src: url(img/header_m.png);
}

/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 481px) {
    .gridContainer {
        width: 93.451%;
        padding-left: 0.7744%;
        padding-right: 0.7744%;
    }

    #div_header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #img_header {
        src: url(img/header_t.png);
    }
}

/* Desktoplayout: 769 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 769px) {
    .gridContainer {
        width: 89.1614%;
        max-width: 1232px;
        padding-left: 0.4192%;
        padding-right: 0.4192%;
        margin: auto;
    }

    #div_header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #img_header {
        src: url(img/header.png);
    }
}

既然您已经阅读了所有内容，您应该想象一下我无法从css内部更改

img.src

，我认为唯一的方法是从adobe DW cs6侵入未格式化的自动生成javascript，不是吗？

现在用于媒体查询css

    @media screen and (min-width: 500px) and (max-width: 800px) { 
// your css code here 

 }

---

如果您使用的是不同分辨率的单个图像，则无需拍摄3张图像。拿大一点的图片（桌面大小）写下下面的css

<header><img src="img/header_m.png" /></header>

我相信你知道媒体的疑问

更改前景图像

@media only screen and (min-width : 320px) and (max-width : 480px) {
 Your image for mobile
}

如果要更改不同设备的前景图像，请尝试z-index

.header{
    background-color:red;
    position:relative;  height:auto}

img:first-child{
    position:absolute; top:0; left:0;
    z-index:-1; width:200px
}
img{
    position:absolute; top:0; left:0;
    z-index:10; width:200px
} 

更改相应设备宽度的z索引值

---

此处演示

您可以使用

CSS3媒体查询

获得所需的结果

我认为你应该阅读这篇文章，它将帮助你：-

---

您可以使用媒体查询制作不同的图像

    @media screen and (min-width: 500px) and (max-width: 800px) { 
// your css code here 

 }

移动

@media only screen and (min-width : 320px) and (max-width : 480px) {
 Your image for mobile
}

平板电脑

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){

Your image for tablet
}

---

现在，我在div_头中设置了另一个div，并给该子div一个背景图像和硬编码的宽度和高度（匹配各个图像），因此我伪造了一个标签，现在可以通过css定义（backgound-）图像源，而不是定义图像源的属性）

---

无论如何，感谢您的回答

但是OT想要img标签中的不同图像？谢谢。：）他提到了3个衍射分辨率图像，所以我假设它在不同分辨率中是相同的图像。无论如何，在这种情况下，他可以使用媒体查询，输入的正是我输入的内容，3幅图像，具有不同的分辨率和纵横比，我的问题是使用css切换图像，唯一的问题是“crs:url（img/image.png）”见我的update@Ace检查我的最新答案。我假设您正在尝试更改前景imagez索引，但它没有达到我的要求。移动网站版本的开发，以尽量减少加载速度和网站的知识库的。。。如果我使用zindex或visibility，它仍然会在移动版本中加载高分辨率图像…Rohit但OT希望img标签中有不同的图像？正如我所说，这是一个自动生成的代码vrom dreamweaver cs6，如果你知道，你也应该知道它已经有媒体查询…请参阅我的更新，问题不是图像查询，它是其中的一部分。