Есть ли эквивалент srcset для фонового изображения css

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?);

}
511   8  

8 ответов:

image-set является эквивалентной функцией CSS. Мы должны добавить эквивалентную функциональность srcset (определение ресурсов в соответствии с их размерами) в спецификацию.

В настоящее время он реализован только в Safari, Chrome и Opera с -webkit- префикс, и это только поддерживает x дескрипторов.

53  
2018-03-21 22:04:30

почти уверен, что: 

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

работает так же. Браузер изучит изображения, посмотрит, что подходит лучше всего, и будет использовать это.

17  
2014-11-07 15:02:36

для polyfill вы можете использовать img с srcset в качестве механизма для загрузки правильного размера изображения, а затем использовать JS, чтобы скрыть его и установить фоновое изображение родительского элемента.

вот скрипка:http://jsbin.com/garetikubu/edit?html, выход

использование onload и положить JS в качестве блокирующего скрипта в <head> важно. Если вы поставите скрипт позже (скажем в конце <body>), вы можете получить состояние гонки, где img.Currents еще не установлен браузер. Лучше всего подождать, пока он будет загружен.

пример позволяет увидеть исходный img загружается. Вы можете легко скрыть его с помощью CSS.

6  
2016-08-03 20:03:57

вы можете использовать медиа-запросы для вашей цели. Это просто, как это:

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

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

и я думаю, что он работает на каждом браузере, который поддерживает медиа-запросы ;)

3  
2018-07-24 12:07:17

аналогичное решение с помощью <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>
2  
2016-07-17 22:50:27

на основе @Westonответ, я построил более общее решение jQuery, вы можете в основном просто скопировать и вставить JS и CSS и сосредоточиться на HTML-части ;)

TL; DR-fiddle: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 класса.

этого самого будет недостаточно! так что он также ставит интервал проверки на windowload событие, чтобы проверить, если события загрузки были завершены, если нет, он запускает их. (imgload событие очень часто вызывают только при первой загрузке, на следующих нагрузках, Источник изображения смог быть извлекается из кэша, в результате img load event не уволили!)

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 родительское дерево DOM.

2  
2017-08-14 19:51:33

чтобы сделать это, установите изображение в ширину: 100%; высота: 100%; и объект-fit: обложка или содержать.

вот пример:

.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, 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 обходной путь.

2  
2017-10-19 21:13:57

Если вы используете Foundation framework (https://foundation.zurb.com/), Вы можете использовать плагин обмена для этого:

<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  
2018-02-19 01:31:30

Comments

    Ничего не найдено.
Click here to cancel reply.