unknown-user-habr

1. Считать размер не от window, а от body:

var widthBg = $('body').width();
var heightBg = $('body').height();

2. У html, body, .b-main-page-scroll и ,b-main-page-scroll__layer ширина margin, padding и border должны быть равна 0. Иначе их надо учитывать в вычислениях.

3. Если у тега img есть margin - его надо учитывать. Если же есть padding и/или border, то надо использовать свойство CSS box-sizing.

4. На всякий случай имеет смысл для .b-main-page-scroll и .b-main-page-scroll__layer установить свойство CSS "overflow: hidden;".

Точно такая же, как между block и inline-block

Особенности inline- элементов:

- им можно задавать размеры, рамки и отступы, как и блочным элементам;
- их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера;
- элементы в одной строке выравниваются вертикально подобно строчным элементам (verticacal-align)

stackoverflow.com/questions/2659952/maximum-length...

У вас должен быть прописан класс для img.
Например:

Далее добавляете event для этого класса, где меняете src:
$('.my-img').click(function() {
$(this).attr('src', '...');
}