Как сделать автоматическое определение размеров картинки?

Question

[catssss]

Реализовал небольшой слайдер, который пролистывает картинку по клику на кнопку. Он пролистывает картинку на определенное количество пикселей влево и вправо. Скажите, как сделать так, чтобы он автоматически определял размер картинки или div блока, которой будет вместо картинки и пролистывался на обходимое количество пикселей?

document.getElementById('slider-left').onclick = sliderLeft;
document.getElementById('slider-right').onclick = sliderRight;
let left = 0;

function sliderRight() {
    let polosa = document.getElementById('polosa');
    left = left - 128;
    if (left < -512) {
        left = 0;
    }
    polosa.style.left = left + 'px';
}

function sliderLeft() {
    let polosa = document.getElementById('polosa');
    left = left + 128;
    if (left > 0) {
        left = 0;
    }
    polosa.style.left = left + 'px';
}

<div id="slider">
        <div id="polosa">
            <img src="img/cat.png" alt="Картинка 1">
            <img src="img/cat2.png" alt="Картинка 2">
            <img src="img/fish.png" alt="Картинка 3">
            <img src="img/fish2.png" alt="Картинка 4">
        </div>
    </div>
    <button id="slider-left">left</button>
    <button id="slider-right">right</button>

#slider {
    width: 384px;
    height: 128px;
    border: solid 5px black;
    margin: 50px auto;
    overflow: hidden;
}

#polosa {
    width: 896px;
    position: relative;
    left: 0;
    transition: all ease 1s; 
}

#polosa img {
    float: left;
}

#polosa::after {
    content: '';
    display: block;
    clear: both;
}

Answer 1

[Artem Ivanov]

1. задавайте размеры вручную, если картинки разные - сделайте их одинаковыми
2. используя nth-child, показывайте нужный слайд, а остальные скрывайте через visiblity
3. используйте готовые слайдеры: фоторама, сликслайдер и т.д.

Answer 2

[anyshape]

Можно повесить событие на картинку и по загрузке получать ее размер.

document.querySelector('img').addEventListener('load', function() {
            alert(`width = ${ this.naturalWidth }px\nheight = ${ this.naturalHeight }px`)
        })