是否有一个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与bgFromSrcSetbgFromSrcSet最近的父级。

这本身是不够的! 因此,它还会在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 } } 

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