Question

我们为桌面设备，平板电脑和手机设备提供不同尺寸的图片。我们可以告诉浏览器只使用CSS加载什么图像吗？

我可以使用这样的东西吗？

<div class="image"></div>

<style>
  .image {background-image: url("/BIG/imageName.jpg");}
  @media only screen and (max-width: 400px) {
     .image {background-image: url("/SMALL/imageName.jpg");}
  }
<style>

如果浏览器分辨率从一开始就是300px，它会加载SMALL图像吗？

谢谢。

Answer 1

您需要为图像设置宽度和高度。否则它将无法显示。检查我的小提琴。

  .image {background-image: url("https://blogs.ubc.ca/CourseBlogSample01/wp-content/themes/thesis/rotator/sample-1.jpg"); width:400px; height:300px;}
  @media only screen and (max-width: 400px) {
 .image {background-image: url("http://res.cloudinary.com/demo/image/upload/t_demo_combined/sample.jpg"); width:100px; height:100px;}
   }

DEMO

Answer 2

这应该

.image {background-image: url("/BIG/imageName.jpg");}
@media (max-width: 400px) {
    .image {background-image: url("/SMALL/imageName.jpg");}
}

或（为了便于阅读）：

@media (min-width: 401px) {
    .image {background-image: url("/BIG/imageName.jpg");}
}
@media (max-width: 400px) {
    .image {background-image: url("/SMALL/imageName.jpg");}
}

编辑：

哦，只有一件事：相反，只写屏幕＆＃34;我建议使用https://github.com/scottjehl/Respond来支持较旧的浏览器。

CSS - 可以根据设备分辨率上传不同的图像吗？

2 个答案: