根据移动设备或桌面设备更换图片 HTML & CSS

Question

根据移动设备或桌面设备更换图片 HTML & CSS

c#htmlcssrazormodel-view-controller

7

我正在尝试根据用户使用的设备（移动设备或桌面设备）来更改图片。

我有两张不同的图片，带有“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)
    }
}

请帮帮我。

- Andre Korosh Kordasti

你在移动设备上测试过吗？如果是的话，设备的比例分辨率是多少？我知道我的S5是3x。 - Jack hardcastle

是的，我已经在移动设备上测试过了，我的 CSS 代码的其余部分都可以正常工作，所以没问题。 - Andre Korosh Kordasti

5个回答

10

另一个技巧是使用两个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;}
}

- WebbySmart

5

display: none 并不会阻止浏览器加载图片，因此实际上情况更糟，因为两张图片都会在每个设备上加载。 - Todd Padwick

4

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

- WebbySmart

尝试使用display: block，并确保它指向图像的正确路径。你的样式表是否在主根目录中？ - WebbySmart

请查看我的JSFIDDLE - http://jsfiddle.net/p96denv4/2/ 您的背景图应该显示出来了。我认为在移动设备上，您不能真正使用img标签来更改图像源，因为浏览器支持的原因。 - WebbySmart

0

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

这可能对您有用，定义各自媒体查询中的每个图像。

- Jack hardcastle

这在所有浏览器上都无法使用。IE、Firefox会失败，因为content:url()不受支持。 - Aaron

在 Firefox 版本 36.0.1 中测试，什么也没有显示？http://jsfiddle.net/3BRN7/406/ - Aaron

-3

你不能这样改变图像源。你需要使用一个带有原始背景图像的 div 才能使其工作。

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

- Aaron

那CSS呢？ - Andre Korosh Kordasti

使用原始CSS，应用图像的高度和宽度。 - Aaron

你有这个神奇的例子吗，@Jackhardcastle？ - Aaron

@Aaronhttp://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/ - Jack hardcastle

哇，@Jackhardcastle，这里的一个选项可以隐藏和显示两个不同的图像？在你提供的示例页面上没有改变图像源吗？就像我最初说的那样，你根本不知道自己在说什么。 - Aaron

显示剩余14条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Henrik Karlsson · Accepted Answer

如果您想要追求未来，<picture>元素是一种选择。目前只有基于 Blink 内核的浏览器和 Firefox 浏览器的 beta 版本支持它，浏览器兼容性仍然很差。好消息是，它会回退到普通的 <img> 标签，所以如果不支持它，就只是加载速度稍微慢一点而已。

那么它是如何工作的呢？

本例大部分内容源自html5rocks网站并进行了一些修改

一个 <picture> 元素看起来像这样：

<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元素的酷之处在于它允许你为每个元素指定媒体查询。如果没有匹配的或picture元素不受支持，则显示最后一个。