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

如果您希望将来生活，<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。

Answer 2

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

HTML

<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 3

更新：请查看http://jsfiddle.net/p96denv4/2/

这是你要做的。

HTML

<div id="ifMobile1"></div>

CSS

#ifMobile1 {
    background-image: url(/images/arts/IMG_1447m.png)
    width: set your width  ;
    height: set your height  ;
}

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

Answer 4

您不能像这样更改图像来源。您需要使用带原件的div作为背景图像才能工作。

<div id="ifMobile1" style="background-image: url(images/arts/IMG_1447m.png);"></div>

Answer 5

img#id {
    content:url(http://example.com/image.png);
}

这可能对您有用，可以在相应的媒体查询中定义每个图像。

根据移动或桌面HTML＆amp;更改图像CSS

5 个答案:

好吧，那它是如何运作的？