是否有一个srcset相当于CSS背景图像
与srcset属性img看起来像做一个伟大的方式来响应图像。 有一个等效的语法，在CSS的background-image属性？
HTML
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
CSS
.mycontainer { background: url(?something goes here?); }
image-set是相当的CSSfunction。 我们应该添加等效的srcsetfunction（根据其尺寸定义资源）。
目前只在Safari，Chrome和Opera中以-webkit-前缀实现，只支持x描述符。
很确定：
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
以同样的方式工作。 浏览器将检查图像，看哪个最合适，并将使用该图像。
对于一个polyfill，你可以使用一个带有srcset的img作为下载正确图像大小的机制，然后使用JS来隐藏它并设置父元素的背景图像。
这是一个小提琴： http : //jsbin.com/garetikubu/edit?html,output
使用onload并将JS作为阻止脚本放在<head>是很重要的。 如果稍后放置脚本（比如<body>的末尾），则可以获得尚未由浏览器设置img.currentSrc的争用条件。 最好等待它被加载。
该示例允许您查看正在下载的原始img。 你可以很容易地用一些CSS来隐藏它。
基于@Weston的回答，我已经构build了一个更通用的jQuery解决scheme，基本上可以复制和粘贴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 ）的load事件background-image ，并将其作为background-image CSS与bgFromSrcSet类bgFromSrcSet最近的父级。
这本身是不够的！ 因此，它还会在window load事件上放置一个间隔检查器来testing加载事件是否已经完成，如果没有，则触发它们。 （ img load事件通常只在第一次加载时触发，在下面的加载中，可以从caching中检索图像源， 导致img加载事件不被触发！ ）
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); }); });
HTML
…可能看起来像这样：
<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本身！ 它只能被设置为img DOM父树中的元素。
使用<picture>元素的类似解决scheme： 这里的教程
教程案例：
我怀疑，如果我使用相同的图像为一个较小的屏幕尺寸，我的图像的主要主题可能会变得太小。 我想要以不同的屏幕尺寸显示不同的图像（更关注主要主题），但是我仍然希望根据设备像素比例显示相同图像的单独资源，并且我想要自定义图像的高度和宽度基于视口的图像。
示例代码：
<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>
另一种坦率地说更加强大的方法是将背景图像的特征和选项与srcset属性相匹配。
为此，将图像设置为宽度：100％; 身高：100％ 和物体适合：覆盖或包含。
这里是一个例子：
.psuedo-background-img-container { position: relative; width:400px; height: 200px; } .psuedo-background-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
<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, wp-content/blogs.dir/1/files/2016/12/Keep-280x175.jpg 280w, wp-content/blogs.dir/1/files/2016/12/Keep-432x270.jpg 432w, wp-content/blogs.dir/1/files/2016/12/Keep-216x135.jpg 216w" sizes="(max-width: 640px) 100vw, 640px"> </div>
您可以使用媒体查询来达到您的目的。 这很简单：
.mycontainer { background-image:url("img/image-big.jpg"); // big image @media(max-width: 768px){ background-image:url("img/image-sm.jpg"); // small image } }
我认为它适用于支持媒体查询的每个浏览器;）
