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

Posted 2023-03-05

【中文标题】根据移动或桌面 HTML 和 CSS 更改图像

【英文标题】：Changing Image depending on Mobile or Desktop HTML & CSS

【发布时间】：2015-05-12 00:50:14

【问题描述】：

所以我尝试根据用户是使用移动版还是桌面版来更改图像。

我有两张不同的图片，一张最后带有“m”的是迷你版，用于桌面，另一张用于移动。但我无法让它工作。

这里有一些代码：

html（使用 Razor，因此 C# 代码有效）：

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

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)
    

请帮帮我。

【问题讨论】：

您是否在移动设备上进行过测试？如果是这样 - 设备的比例分辨率是多少？我知道我的 S5 是 3 倍

是的，我已经在移动设备上对其进行了测试，我的其余 CSS 代码可以正常工作。

【参考方案1】：

如果你想活在未来，<picture> 元素就是你要走的路。它仍然有非常糟糕的浏览器支持（目前只有基于闪烁的浏览器和 Firefox 测试版）。好消息是它回退到一个愚蠢的<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" 
    >
</picture>

在http://googlechrome.github.io/samples/picture-element/ 亲自尝试示例，只需调整浏览器的宽度即可查看小猫的变化。

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

【讨论】：

啊，未来……看起来棒极了。

是的，图片元素的支持比 srcset 少，但我不认为它是 srcset 版本 2。它们“有点”做同样的事情，但方式不同。 srcset 如果它是具有不同分辨率的相同图像会更好 - 然后浏览器可以根据分辨率、像素密度以及将来可能的网络速度自行决定要加载什么图像。另一方面，图片元素由您决定图像。这可能是好是坏。如果您想在较小的设备上使用不同的图像，那么您可以这样做。

@tony.gustafsson 哦，谢谢你的信息！我认为图片元素会留下来。碰巧知道其中一个是否即将退出？

@Ineentho 不，我认为它们都将继续存在 :) 这些标准的某些部分尚未在任何浏览器中实现，但是当我们可以更好地使用它时，它会很棒。

【参考方案2】：

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

HTML

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

CSS

#img1 display:block;
#img2 display:none

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

【讨论】：

Display none 不会阻止浏览器加载图像。所以这实际上更糟糕，因为这两个图像都在每台设备上加载。

【参考方案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  ;
    

【讨论】：

尝试 display: block 并确保它指向图像的正确路径。您的样式表在您的主根目录中吗？

请查看我的 JSFIDDLE - jsfiddle.net/p96denv4/2 您的背景图片应该会显示。我认为在当今时代，您无法真正使用 img 标签来更改移动设备的图像源。由于浏览器支持。

【参考方案4】：

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

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

【讨论】：

这并非在所有浏览器上都可用。 IE, Firefox 将失败，因为 content:url() is not supported

在 firefox 36.0.1 版本中测试过，没有任何显示？ jsfiddle.net/3BRN7/406

【参考方案5】：

您不能像那样更改图像源。您需要使用带有原始图像的 div 作为背景图像。

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

【讨论】：

那么 CSS 呢？

哈哈@Jackhardcastle 真的吗？？你认为你可以用css改变图像源吗？你对我的回答投了反对票，你不知道你在说什么？

那不行，它必须是一个img元素，div根本没有显示任何东西。

使用您的原始 css 并应用图像的高度和宽度。

是的，我确实相信@Aaron