Применение класса "ibg" // «Фрилансер по жизни»

CSS

.ibg{

background-position: center; background-size: cover; background-repeat: no-repeat; position: relative;

}

.ibg img{

width: 0; height: 0; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden;

}

Чистый JS

function ibg(){

let ibg=document.querySelectorAll(".ibg"); for (var i = 0; i < ibg.length; i++) { if(ibg[i].querySelector('img')){ ibg[i].style.backgroundImage = 'url('+ibg[i].querySelector('img').getAttribute('src')+')'; } }

}

ibg();

jQuery

function ibg(){

$.each($('.ibg'), function(index, val) { if($(this).find('img').length>0){ $(this).css('background-image','url("'+$(this).find('img').attr('src')+'")'); } });

}

ibg();

Шпаргалка является дополнением к выпуску «Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture»