仅为移动设备加载图像答案

【问题标题】：Load an image only for mobile device仅为移动设备加载图像
【发布时间】：2017-08-14 07:27:13
【问题描述】：

我想知道我的首页是否可以加载仅适用于移动用户的图像。我知道使用 javascript 是可能的，但我想知道我是否可以仅使用 CSS 来实现相同的目标。我试图做一些研究，但找不到我要找的东西。我不是指根据屏幕大小调整图像大小，而是加载适合移动设备的图像。

【问题讨论】：

你的意思是使用html img或使用css背景。
@frnt 使用 css 背景 :)

标签： html css image responsive responsive-images

【解决方案1】：

利用media query将background-image改成不同的screen resolutions如下，

div{
  width:100%;
  height:400px;
  background:url('http://placehold.it/350x150/f22/fff');
  background-size:100% 100%;
}
@media screen and (max-width : 480px){
 div{
  background:url('http://placehold.it/480x150/f12/fff');
  background-size:100% 100%;
} 
}
@media screen and (max-width : 320px){
 div{
  background:url('http://placehold.it/320x150/e12/fff');
  background-size:100% 100%;
} 
}

&lt;div&gt;&lt;/div&gt;

检查这个jsFiddle。

【讨论】：

@S.Reyes 选择主页 div 并使用媒体查询在不同的断点更改背景图像 url。
感谢您的回答！ :) 我会尝试实施这样的方法！ :D
欢迎@S.Reyes :-)

【解决方案2】：

您可以根据屏幕大小使用媒体查询来应用类。

#img {
    display: none;
}

/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
   #img{
     display: block;
   }

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

【讨论】：

您好，谢谢您的回答！但是，如果我采用这种方法，它不会将所有图像加载到页面并降低性能吗？我想知道是否使用纯 css，我可以将所需的图像加载到页面。
无论如何，您的所有图像都会在开始时加载，您需要优化图像，这样无论您在移动设备或桌面上显示什么，它们都不会减慢网站速度。但这应该允许您在任何屏幕尺寸上隐藏和显示您需要的内容。

【解决方案3】：

是的，这是可能的。您可以使用媒体查询。示例 CSS：

#yourimage {
    display: none;
}

@media (max-width: 500px) {
    #yourimage {
        display: block;
    }
}

此代码适用于 html 图像。这是一个 JSFiddle：

https://jsfiddle.net/vqfLokpa/

只需点击运行，然后开始缩小浏览器窗口。

【讨论】：

您好，感谢您的回复。场景是，我有两个图像。其中之一是用于桌面网站的，而且相当大。但是对于较小的屏幕（手机），我想加载该图片的较小版本。
然后只需将第一张图片设置为display: none; 并将新图片设置为display: block; 如果您不确定如何实现它，我使用 JSFiddle 编辑了帖子。
但这不会同时加载两个图像并降低性能吗？因为在这种情况下，它是我的首页，上面有很多媒体。 :)
好吧，浏览器只加载它适用的 CSS。因此，您可以对桌面进行媒体查询并将图像放在那里。然后它不会在手机上加载。
啊，我明白了！谢谢老兄:) 我想这可能就是我要找的东西：D

【解决方案4】：

根据您对@NullDev 的评论，您需要创建一个大小合适的 div 并将图像作为背景图像应用到元素上，以调节通过 CSS 加载的内容。

例如：

HTML：

<div id="image"></div>

CSS：

#image {
  position: relative;
  width: 400px;
  height: 400px; 
  background-image:url('/path/to/image');
  background-size: cover;
  background-repeat: no-repeat;
}

然后应用媒体查询：

@media only screen and (max-width : 480px) {
   #image{
     background-image:url('/path/to/mobile/image');
   }
}

我希望这会有所帮助。

【讨论】：