根据移动或桌面HTML和CSS更改图像

Question

所以我试图改变图像取决于用户是在移动版还是桌面版.

我有两个不同的图像,最后一个带有"m"的图像是用于桌面的迷你版本,另一个用于移动版本.我不能让它工作.

这是一些代码:

HTML(使用Razor,所以C#代码有效):

<img id="ifMobile1" src="images/arts/IMG_1447m.png" alt="">

CSS:

#ifMobile1 {
    background-image: url(/images/arts/IMG_1447m.png)
}

@media all and (max-width: 499px) {
    #ifMobile1 {
        background-image: url(/images/arts/IMG_1447.png)
    }
}

请帮帮我.

Answer 1

另一个技巧是有两个 img 标签，并根据设备隐藏一个。

超文本标记语言

<img id="img1" src="images/arts/IMG_1447.png" alt="">
<img id="img2" src="images/arts/IMG_1447m.png" alt="">

CSS

#img1 {display:block;}
#img2 {display:none}

@media all and (max-width: 499px) {
    #img1 {display: none;}
    #img2 {display: block;}
}

Answer 2

如果你想生活在未来,<picture>元素是要走的路.它仍然有非常糟糕的浏览器支持(只有基于blink的浏览器,以及现在的firefox beta).好消息是它会回落到一个愚蠢的<img>标签上,所以如果没有支持,除了加载速度稍慢之外不会造成任何伤害.

好吧,那怎么办？

这个例子的大部分来自html5rocks并做了一些修改

图片元素如下所示:

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

请在http://googlechrome.github.io/samples/picture-element/上自行尝试示例,只需调整浏览器的宽度即可查看小猫更改.

关于picture元素的一个很酷的事情是它允许你为每个<source>元素指定媒体查询.<img>如果没有source匹配,或者如果不支持图片元素,则显示最后一个.