отзывчивый эффект горизонтальной прокрутки

Question

Я пытаюсь создать эффект сайта с боковой прокруткой с двумя стрелками в качестве кнопок, используя ванильный Javascript и CSS, с большим горизонтальным изображением.

Я настраиваю его, скрывая переполнение тела.и вычитание ширины с помощью transform translate, в то время как изображение абсолютно помещено внутри оболочки (код ниже для справки).Пока это работает, но не реагирует, так как точки останова не устанавливаются в разных окнах просмотра, и я бы хотел, чтобы они это сделали.Например, если точка останова составляет половину дерева внутри изображения шириной 1080p, я хочу, чтобы она была половиной дерева в разрешении 720, но вместо этого она переводит меньше места и заканчивается слева от дерева, таким образом, заканчивая коротким наконец всего перехода.

let bg = document.getElementById('page_wrapper')
let ar = document.getElementById('arrow_right')
let al = document.getElementById('arrow_left')
// ar = arrow right, al = arrow left, bg = background(image)
let positions = 
['0%','-65%','-110%','-180%','-247%','-314%','-386%','-486%','-536%']
let pos = 0
function moveRight() {
    pos++;
    if(pos !=0) al.style.display = 'initial';
    if(pos === 8) ar.style.display = 'none';
    bg.style.transform = 'translate('+positions[pos]+')';
}
function moveLeft() {
    pos--;
    if(pos !=8) ar.style.display = 'initial';
    if(pos === 0) al.style.display = 'none';
    bg.style.transform = 'translate('+positions[pos]+')';
}