根据移动设备或桌面设备更改图像 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

你不能那样改变图片来源。您需要将 div 与原始图片一起用作背景图片才能正常工作。

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

Answer 2

更新：请查看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 3

如果你想活在未来，<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/ 上亲自尝试示例，只需调整浏览器的宽度即可看到小猫的变化。

图片元素最酷的地方在于它允许您为每个 <source> 元素指定媒体查询。如果没有匹配到 source，或者图片元素不受支持，则显示最后一个 <img>。

Answer 4

另一个技巧是有两个 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 5

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

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

根据移动设备或桌面设备更改图像 HTML & CSS

Changing Image depending on Mobile or Desktop HTML & CSS

html

css

c#

model-view-controller

razor

好的，它是如何工作的？