imgwithsrcset属性看起来是做响应式图像的好方法。是否有适用于 cssbackground-image属性的等效语法？
HTML
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
CSS
.mycontainer {
background: url('what goes here?');
}
问问题
67895 次
10 回答
96
image-set是等效的 CSS 功能。我们应该在规范中添加等效的 srcset 功能（根据它们的维度定义资源）。
-webkit-目前在所有带有前缀的主要浏览器（Firefox、Chrome、Safari、Edge）中实现。Safari 只支持支持x描述符。
于 2014-11-08T10:09:13.107 回答
28
坦率地说，另一种方法更健壮，是将背景图像的特征和选项调整为具有 srcset 属性的图像。
为此，请将图像设置为 width: 100%; 高度：100%；和对象匹配：覆盖或包含。
这是一个例子：
.pseudo-background-img-container {
position: relative;
width:400px;
height: 200px;
}
.pseudo-background-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}<div class="pseudo-background-img-container">
<img class="pseudo-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>这可能不是每个人的最佳方法，但我想它会在没有任何 javascript 解决方法的情况下获得最理想的结果。
于 2017-10-19T18:13:57.783 回答
27
很确定：
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
以同样的方式工作。浏览器将检查图像，查看最适合的图像并使用该图像。
于 2014-11-07T13:02:36.273 回答
11
对于 polyfill，您可以使用带有 srcset 的 img 作为下载正确图像大小的机制，然后使用 JS 隐藏它并设置父元素的背景图像。
这是一个小提琴： http: //jsbin.com/garetikubu/edit ?html,output
使用onloadJS 并将其作为阻塞脚本放入其中<head>很重要。如果您稍后放置脚本（例如在 末尾<body>），您会得到一个竞争条件，其中 img.currentSrc 尚未由浏览器设置。最好等待加载。
该示例允许您查看正在下载的原始 img。您可以使用一些 CSS 轻松隐藏它。
于 2016-07-09T16:21:33.493 回答
11
您可以将媒体查询用于您的目的。这很容易：
.mycontainer {
background-image:url("img/image-big.jpg"); // big image
}
@media(max-width: 768px){
.mycontainer {
background-image:url("img/image-sm.jpg"); // small image
}
}
而且我认为它适用于所有支持媒体查询的浏览器；）
于 2017-10-22T20:21:05.943 回答
3
<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>
于 2016-07-17T19:50:27.953 回答
2
如果您使用的是 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
于 2018-02-18T23:31:30.087 回答
1
根据@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如果不支持），并将其作为background-imageCSS 放置到最近的具有类的父bgFromSrcSet级。
这本身是不够的！所以它还在事件上放置了一个间隔检查器window load来测试加载事件是否已经完成，如果没有，它会触发它们。（img load事件通常仅在首次加载时触发，在后续加载时，可以从缓存中检索图像源，导致 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自身！它只能设置为imgDOM 父树中的元素。
于 2017-08-14T16:34:06.877 回答
0
我使用了名为 bg-set 的 Lazysizes 插件来增加对背景图像的响应能力。它的工作原理与 srcset 类似，并根据设备宽度提供一组多个背景图像。
<div class="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w" data-sizes="auto">
data-bgset 中的图像是相同的，我们只是提供了浏览器可以选择的指定宽度的图像。
于 2022-02-04T19:21:18.253 回答
0
根据CSSTricks，image-set()自 2021 年起应用于此目的。
以下是它推荐用于支持所有现代浏览器版本的完整代码段：
.hero {
/* Fallback */
background-image: url("platypus.png");
/* Chrome/Edge/Opera/Samsung, Safari will fallback to this as well */
background-image: -webkit-image-set(url("platypus.png") 1x, url("platypus-2x.png") 2x);
/* Standard use */
background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x);
}
于 2021-12-16T17:22:57.693 回答