Css 具有多个背景的响应图像可能是可选的

所以我的问题是：

我希望移动/桌面用户可以看到不同的图像，视网膜/非视网膜用户可以看到不同的图像

目标是根据用户的屏幕优化图像大小。所以我试过了，但没能成功，所以我能想出一个类似黑客的方法：

<div class="img-container">
  <div class="background-img-responsive" id="image_17691" title="The perfect denim jacket"></div>
  <style type="text/css">
    #image_17691 {
      padding-top: 48.94%;
      background-image: url(/media/W1siZiIsIjIwMTQvMDkvMTUvMTcvMDUvMzgvMzQyL1NjcmVlbl9TaG90XzIwMTRfMDlfMTVfYXRfMTEuMzkuMzVfQU0ucG5nIl0sWyJwIiwidGh1bWIiLCIxNDEweD4iXSxbInAiLCJlbmNvZGUiLCJqcGciLCItcXVhbGl0eSA0MCAtYmFja2dyb3VuZCB3aGl0ZSAtZmxhdHRlbiJdXQ/Screen%20Shot%202014-09-15%20at%2011.39.35%20AM.jpg);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dppx) {
      #image_17691 {
        background-image: url(/media/W1siZiIsIjIwMTQvMDkvMTUvMTcvMDUvMzgvMzQyL1NjcmVlbl9TaG90XzIwMTRfMDlfMTVfYXRfMTEuMzkuMzVfQU0ucG5nIl0sWyJwIiwidGh1bWIiLCIyODIweD4iXSxbInAiLCJlbmNvZGUiLCJqcGciLCItcXVhbGl0eSA0MCAtYmFja2dyb3VuZCB3aGl0ZSAtZmxhdHRlbiJdXQ/Screen%20Shot%202014-09-15%20at%2011.39.35%20AM.jpg);
      }
    }
    @media (max-width: 767px) {
      #image_17691 {
        padding-top: 74.64%;
        background-image: url(/media/W1siZiIsIjIwMTQvMDkvMTUvMTcvMDUvMzgvMzk5L1NjcmVlbl9TaG90XzIwMTRfMDlfMTVfYXRfMTEuNDAuMTNfQU0ucG5nIl0sWyJwIiwidGh1bWIiLCIxMTUyeD4iXSxbInAiLCJlbmNvZGUiLCJqcGciLCItcXVhbGl0eSA0MCAtYmFja2dyb3VuZCB3aGl0ZSAtZmxhdHRlbiJdXQ/Screen%20Shot%202014-09-15%20at%2011.40.13%20AM.jpg);
      }
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 767px),
    only screen and (-o-min-device-pixel-ratio: 13/10) and (max-width: 767px),
    only screen and (min-resolution: 120dppx) and (max-width: 767px) {
      #image_17691 {
        background-image: url(/media/W1siZiIsIjIwMTQvMDkvMTUvMTcvMDUvMzgvMzk5L1NjcmVlbl9TaG90XzIwMTRfMDlfMTVfYXRfMTEuNDAuMTNfQU0ucG5nIl0sWyJwIiwidGh1bWIiLCIyMzA0eD4iXSxbInAiLCJlbmNvZGUiLCJqcGciLCItcXVhbGl0eSA0MCAtYmFja2dyb3VuZCB3aGl0ZSAtZmxhdHRlbiJdXQ/Screen%20Shot%202014-09-15%20at%2011.40.13%20AM.jpg);
      }
    }
  </style>
</div>

---

是否有更好的/对html5友好的/对未来友好的/标记更少的解决方案？

在css中使用@media，无论是否方便，都是不用JavaScript或JQuery检测屏幕大小的最佳方法之一。我不认为这是一种黑客行为，因为它效率高，工作稳定，易于使用

检测视网膜屏幕相当简单，您只需使用：

@media 
(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { 

    #image_17691 {
      background-image: url(/media/retina-background.jpg);
    }
}

然后，对于其他非视网膜媒体查询，如低分辨率智能手机，您可以使用：

@media only screen 
and (max-width : 320px) {

    #image_17691 {
        background-image: url(/media/non-retina-background.jpg);
    }
}

以下两个链接列出了您可以使用的不同CSS媒体查询：

---

始终发布代码，而不是代码屏幕截图，这样我们可以在提问时感受到您的努力。我们在这里是为了帮助轻松的问题…？改变视网膜和非视网膜用户的图像，你可能想看看。这是一种javascript，如果用户有一个高dpi屏幕，并且有一个@2x资产可用，它可以将图像交换到视网膜上。@Bhojendra-C-LinkNepal我认为屏幕截图实际上更可读。巴斯蒂安：我不想让视网膜用户下载两次图像。听起来你是认真的，要基于设备桌面、平板电脑、手机和视网膜来提供正确的图像。因为picture元素对浏览器的支持非常有限--您可能想试试这个picture polyfill：另一个使用不同方法的流行选项是，下面是一个非常有用的测试页面，用于几种不同的图像大小调整技术：@Dorian-以下是一些有用的信息。最大的问题是加载每个设备/屏幕大小/分辨率的正确文件大小，而不是在手持设备上加载大文件大小，或者在视网膜/大屏幕上加载小文件大小。带有Picturefill的元素是一种解决方案，但可能有更简单的选项。例如，如果存在大量现有图像，而您不想对每个图像进行编码，则自适应图像可能会为您带来负担。查看本文和第一段中的电子表格链接，以了解详细情况。