Сергей Ракипов,
добавил класс для кнопок, пост тот-же #22

Спасибо

Посмотрел, как идеально все сделано!!!

рони,
А получается что скрипт работает так. Масшат идет от верхнего левого угла.
А как сделать что бы он масштабировался в большую или меньшую сторону от тогда месте который сейчас находится в блоке. Понимаю что это сложно сделать. То хотя бы от центра шел масштаб.

Все вроде разобрался как это сделать, как я понял это вот здесь, но это будет зум от того места который я установлю.

el.addEventListener("pointerdown", pointerHandler);
        let img = el.querySelector("img");
        let ratio = max_ratio = 10;
        const zoom = _ => {
            el.scrollTo(0, 0);
            img.width = min_width + (max_width - min_width) * ratio / max_ratio;
            img.height = img.width * (max_height / max_width);
        }

А можно сделать что бы зум шел от того мета который при просмотре в блоке

И как я понял за центровку изображение отвечает вот эта часть

max_width = img.naturalWidth;
            max_height = img.naturalHeight;
            min_width = el.clientWidth;
            el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px";
            min_height = el.clientHeight;

            el.scrollTo(
                (max_width - min_width) / 2,
                (max_height - min_height) / 2
            );

Просто она не совсем по центру

что то я не много поплыл, а что отвечает за высоту блока

Понял это вот тут

el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px";
            min_height = el.clientHeight;

Сделал так, получилось по центру картинка

max_width = img.naturalWidth;
            max_height = img.naturalHeight;
            min_width = el.clientWidth;
            min_height = el.clientHeight;

А можно сделать так что бы сохранять пропорции в зависимости от разрешения.

??? какие пропорции, картинка всегда имеет одну и туже пропорцию.

Я имею виду не картинку а блок вот это сделать пропорциональный который зависит от разрешение.

.fertezj {
    width: 100%;
    height: auto;
    cursor: crosshair;
    overflow: hidden;
    touch-action: none;
    border: 1px solid rgba(34, 60, 80, 0.9);
    padding: 0;
    margin: 0;
}

не понимаю.