Question

具有img属性的

srcset看起来像是处理自适应图像的好方法。是否存在适用于css background-image属性的等效语法？

HTML

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

CSS

.mycontainer {
    background: url(?something goes here?);
}

Answer 1

image-set是等效的CSS功能。我们应该在规范中添加等效的srcset功能（根据其维度定义资源）。

目前它仅在Safari，Chrome和Opera中使用-webkit-前缀实现，并且它仅支持x描述符。

Answer 2

非常确定：

background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );

以同样的方式工作。浏览器将检查图像，查看最适合的图像并使用该图像。

Answer 3

对于polyfill，您可以使用带有srcset的img作为下载正确图像大小的机制，然后使用JS隐藏它并设置父元素的背景图像。

这是一个小提琴：http://jsbin.com/garetikubu/edit?html,output

使用onload并将JS作为阻止脚本放在<head>中非常重要。如果您稍后放置脚本（例如在<body>末尾），则可能会出现竞争条件，其中浏览器尚未设置img.currentSrc。最好等待它加载。

该示例允许您查看正在下载的原始img。您可以使用一些CSS轻松隐藏它。

Answer 4

另一种坦率地说更健壮的方法是使背景图像的特征和选项适应具有srcset属性的图像。

要执行此操作，请将图像设置为宽度：100％;身高：100％;和物体贴合：覆盖或包含。

以下是一个例子：

＆＃13;

<div class="psuedo-background-img-container">

<img class="psuedo-background-img" src="https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg" srcset="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg 640w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-280x175.jpg 280w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-432x270.jpg 432w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-216x135.jpg 216w" sizes="(max-width: 640px) 100vw, 640px">

</div>

＆＃13;

EnableCdn="true"

＆＃13;

对于每个人来说，这可能不是最好的方法，但我认为如果没有任何javascript解决方法，它将获得最理想的结果。

Answer 5

您可以将媒体查询用于您的目的。这很容易：

SELECT dT.ID, dT.Name, dT.A_Whatever           
      ,(SELECT DATEDIFF(dd, A2.ADATE, A2.BDATE)
          FROM A AS A2
         WHERE dT.ID = A2.ID --the primary key
       ) AS [DateDiff]
        --AND SO ON........
  FROM ( 
         SELECT DISTINCT ID,
                NAME,
                CASE WHEN A.ID IS NULL THEN 'NOT EX.'
                                       ELSE A.Whatever
                END AS A_Whatever,
                D.Z1 AS A.P 
               --AND SO ON......          

         FROM A 

             INNER JOIN A ON A.ID= B.ID AND A.Nb= B.Nb
             LEFT JOIN T AS T2_ID ON T2_D.Z= A.Z
             LEFT JOIN L1 ON A.NR = L1.NR AND A.S = L1.S
             LEFT JOIN LF ON LF.NR = L1.LNR
             --AND SO ON.......
      ) AS dT

我认为它适用于支持媒体查询的每个浏览器;）

Answer 6

使用<picture>元素的类似解决方案： Tutorial here

教程案例：

我怀疑如果我使用相同的图像来缩小屏幕尺寸，我的图像的主要主题可能会变得太小。我想要显示不同的图像（更侧重于主要主题）不同的屏幕尺寸，但我仍然想显示单独的资产基于设备像素比率的相同图像，我想自定义基于视口的图像高度和宽度。

示例代码：

<picture>

<source media="(max-width: 20em)" srcset="images/small/space-needle.jpg 1x,
images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x">

<source media="(max-width: 40em)" srcset="images/medium/space-needle.jpg 1x,
images/medium/space-needle-2x.jpg 2x, images/medium/space-needle-hd.jpg 3x">

<img src="space-needle.jpg" alt="Space Needle">

</picture>

Answer 7

基于@Weston的答案，我已经构建了一个更通用的jQuery解决方案，你基本上只需复制和粘贴JS和CSS并专注于HTML部分;）

TL; DR - 小提琴：https://jsfiddle.net/dpaa7oz6/

CSS

...确保加载时图像几乎不可见

.srcSet{
  position: fixed;
  z-index: 0;
  z-index: -1;
  z-index: -100;
  /* you could probably also add visibility: hidden; */
}

JS / jQuery

此脚本将浏览具有srcSet类和绑定load事件的所有图片，该事件需要currentSrc（如果不支持，则为src）并将其作为{{ {1}} CSS与background-image类最近的父级。

这本身就不够了！ 所以它还会在bgFromSrcSet window事件上放置一个间隔检查器来测试加载事件是否有已完成，如果没有，它会触发它们。（load img事件通常仅在第一次加载时触发，在后续加载时，可以从缓存中检索图像源，导致img加载事件不被解雇了！）

load

HTML

......看起来像这样：

jQuery(function($){ //ON DOCUMENT READY
  var $window = $(window); //prepare window as jQuery object

  var $srcSets = $('.srcSet'); //get all images with srcSet clas
  $srcSets.each(function(){ //for each .srcSet do...
    var $currImg = $(this); //prepare current srcSet as jQuery object

    $currImg
      .load(function(){ //bind the load event
          var img = $currImg.get(0); //retrieve DOM element from $currImg

          //test currentSrc support, if not supported, use the old src
          var src = img.currentSrc ? img.currentSrc : img.src;

          //To the closest parent with bgFromSrcSet class,
          //set the final src as a background-image CSS
          $currImg.closest('.bgFromSrcSet').css('background-image', "url('"+src+"')");

          //remove processed image from the jQuery set
          //(to update $srcSets.length that is checked in the loadChecker)
          $srcSets = $srcSets.not($currImg);

          $currImg.remove(); //remove the <img ...> itself 
      })
    ;      

  });

  //window's load event is called even on following loads...
  $window.load(function(){    
    //prepare the checker
    var loadChecker = setInterval(function(){
        if( $srcSets.length > 0 ) //if there is still work to do...
            $srcSets.load(); //...do it!
        else
            clearInterval(loadChecker); //if there is nothing to do - stop the checker
    }, 150);  
  });

});

注意：类<div class="bgFromSrcSet"> <img class="srcSet" alt="" src="http://example.com/something.jpeg" srcset="http://example.com/something.jpeg 5760w, http://example.com/something-300x200.jpeg 300w, http://example.com/something-768x512.jpeg 768w, http://example.com/something-1024x683.jpeg 1024w, http://example.com/something-1000x667.jpeg 1000w" sizes="(max-width: 2000px) 100vw, 2000px" > Something else... </div>必须不设置为bgFromSrcSet本身！它只能设置为img DOM父树中的元素。

Answer 8

如果您使用的是Foundation框架（https://foundation.zurb.com/），则可以使用Interchange插件：

<div data-interchange="[assets/img/interchange/small.jpg, small], 
                       [assets/img/interchange/medium.jpg, medium], 
                       [assets/img/interchange/large.jpg, large]">
</div>

https://foundation.zurb.com/sites/docs/interchange.html#use-with-background-images

css背景图像是否有srcset等价物

8 个答案:

TL; DR - 小提琴：https://jsfiddle.net/dpaa7oz6/

CSS

JS / jQuery

HTML