Question

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

Answer 1

利用media query更改background-image的{{1}}，如下所示，

＆＃13;

screen resolutions

＆＃13;

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%;
} 
}

＆＃13;

选中jsFiddle。

Answer 2

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

#yourimage {
    display: none;
}

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

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

https://jsfiddle.net/vqfLokpa/

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

Answer 3

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

#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) {

}

Answer 4

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

例如：

HTML：

CSS：

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

然后应用媒体查询：

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

我希望这会有所帮助。

仅为移动设备加载图像

4 个答案: