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

ArrowПовернутися назад
Star

Адаптивні зображення

Практичні прийоми верстки картинок. CSS object-fit HTML picture

Адаптивні зображення. Практичні прийоми верстки картинок. CSS object-fit HTML picture

Шпаргалка є доповненням до випуску:

Logo