是否有 srcset 相当于 css 背景图片

问题描述 投票：0回答：10
带有

img

 属性的 
srcset
看起来是制作响应式图像的好方法。是否有适用于 css 
background-image
属性的等效语法？

HTML

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

CSS

.mycontainer {
    background: url('what goes here?');
}
html css background-image srcset
10个回答
106
投票

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

自 2023 年 5 月 4 日起发布的所有主要浏览器都支持此功能，无需前缀。为了支持较旧的浏览器（主要是 Chrome 和 Edge），您可以添加带有 

-webkit-
前缀的变体，请参阅我可以使用。

33
投票

另一种方法，坦率地说更稳健，是将背景图像的特征和选项调整为具有 srcset 属性的图像。

为此，请将图像设置为宽度：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 解决方法的情况下获得最理想的结果。

27
投票

非常确定：

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

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

12
投票

您可以根据您的目的使用媒体查询。就这么简单：

.mycontainer {    
    background-image:url("img/image-big.jpg"); // big image   
}

@media(max-width: 768px){
   .mycontainer {
        background-image:url("img/image-sm.jpg"); // small image  
    }
}

我认为它适用于所有支持媒体查询的浏览器；）

11
投票

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

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

使用

onload
并将JS作为阻塞脚本放在
<head>
中很重要。如果您稍后放置脚本（例如在 
<body>
的末尾），您可能会遇到浏览器尚未设置 img.currentSrc 的竞争条件。最好等待加载。

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

5
投票

从 2021 年起 

image-set()
应用于此目的，根据 CSSTricks。

这是建议用于支持所有现代浏览器版本的完整片段：

.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(url("platypus.png") 1x, url("platypus-2x.png") 2x);
}
4
投票

使用 

<picture>
元素的类似解决方案： 教程在这里

教程案例：

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

示例代码：

<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>
3
投票

如果您使用 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

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-image
CSS 放置到带有 
bgFromSrcSet 最接近的父级
类。

这本身还不够！因此它还在

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

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 父树中的元素。

1
投票

我使用了名为 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 中的图像是相同的，我们只是提供浏览器可以选择的宽度指定图像。

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.