img с атрибутом srcset выглядит как отличный способ делать отзывчивые изображения. Есть ли эквивалентный синтаксис, который работает в css background-image property?
HTML
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
CSS
.mycontainer {
background: url(?something goes here?);
}
image-set является эквивалентной функцией CSS. Мы должны добавить эквивалентную функциональность srcset (определение ресурсов по их размерам) в спецификацию.
В настоящее время он реализован только в Safari, Chrome и Opera с префиксом -webkit- и поддерживает только дескрипторы x.
Довольно уверен, что:
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
работает одинаково. Браузер рассмотрит изображения, посмотрите, что подходит лучше всего и будет использовать этот.
Для polyfill вы можете использовать img с srcset как механизм для загрузки правильного размера изображения, а затем использовать JS, чтобы скрыть его и установить фоновое изображение родительского элемента.
Здесь сценарий: http://jsbin.com/garetikubu/edit?html,output
Использование onload и включение JS в качестве блокировки script в <head> важно. Если вы поместите script позже (скажем, в конце <body>), вы можете получить условие гонки, в котором браузер img.currentSrc еще не установлен. Лучше ждать, пока он будет загружен.
В этом примере вы можете увидеть загруженный оригинальный img. Вы можете скрыть его с помощью CSS.
Основываясь на ответе @Weston, я построил более общее решение jQuery, вы можете просто скопировать и вставить JS и CSS и сосредоточиться на части HTML;)
... чтобы изображения были едва заметны при загрузке
.srcSet{
position: fixed;
z-index: 0;
z-index: -1;
z-index: -100;
/* you could probably also add visibility: hidden; */
}
Этот script будет проходить через все изображения с srcSet классом и связывать load событие, которое принимает currentSrc (или src, если не поддерживается), и ставит его как background-image CSS в ближайший родительский с классом bgFromSrcSet.
Этого было бы недостаточно!. Таким образом, он также помещает проверку интервала в событие window load для проверки того, завершились ли события загрузки, а если нет, они запускают их. (img load событие очень часто срабатывает только при загрузке при первом загрузке, при следующих нагрузках источник изображения может быть извлечен из кеша, что приводит к событию img load 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 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);
});
});
... может выглядеть так:
<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>:
Учебник здесь
Учебник:
Я сомневаюсь, что если я использую одно и то же изображение для меньшего размера экрана, основной объект моего изображения может стать слишком маленьким по размеру. я хочу для отображения другого изображения (более ориентированного на основной объект) в другой размер экрана, но я все еще хочу отображать отдельные активы одного и того же изображения, основанного на соотношении пикселей устройства, и я хочу настроить высота и ширина изображения на основе видового экрана.
Пример кода:
<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, 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>Вы можете использовать медиа-запросы для своей цели. Это легко:
.mycontainer {
background-image:url("img/image-big.jpg"); // big image
@media(max-width: 768px){
background-image:url("img/image-sm.jpg"); // small image
}
}
И я думаю, что он работает в каждом браузере, который поддерживает медиа-запросы;)