Problem z responsywnym sliderem

Witam,

piszę z prośbą o pomoc, gdyż nie mogę dojść do ładu ze sliderem.. Ogólnie wszystko ładnie się wyświetla, ale kiedy przechodzę do testów na telefonie, to zaczynają się problemy. Wiem, z czego to wynika - muszę ustawić wysokość w px, bo inaczej wszystko się rozjeżdża. A z kolei przy zmniejszeniu rozdzielczości, obrazki się zmniejszają, ale nie do końca na szerokość, a ponadto wysokość rodzica pozostaje, co oczywiste, ta ustawiona w w px.

Wklejam kod poniżej:

1. Html:

<div class="slider" id="slider">
    <img src="img/slider_image_1.jpg" alt="" class="img-slide" />
    <img src="img/slider_image_2.jpg" alt="" class="img-slide" />
    <img src="img/slider_image_3.jpg" alt="" class="img-slide" />
</div>

2. JS:

class Slider {
        constructor(elemSelector, opts) {
            const defaultOpts = {
                pauseTime: 0,
            };
            this.options = Object.assign({}, defaultOpts, opts);
            this.sliderSelector = elemSelector;
            this.currentSlide = 0; 
            this.time = null; 
            this.slider = null;
            this.elem = null;
            this.slides = null;

            this.generateSlider();
            this.changeSlide(this.currentSlide);
        }

        generateSlider() {
            this.slider = document.querySelector(this.sliderSelector);
            this.slider.classList.add('slider');

            const slidesCnt = document.createElement('div');
            slidesCnt.classList.add('slider-slides-cnt');

            this.slides = this.slider.children;

            while (this.slides.length) {
                this.slides[0].classList.add('slider-slide');
                slidesCnt.appendChild(this.slides[0]);
            }
            this.slides = slidesCnt.querySelectorAll('.slider-slide');
            this.slider.appendChild(slidesCnt);
        }

        slidePrev() {
            this.currentSlide--;
            if (this.currentSlide < 0) {
                this.currentSlide = this.slides.length - 1;
            }
            this.changeSlide(this.currentSlide);
        }

        slideNext() {
            this.currentSlide++;
            if (this.currentSlide > this.slides.length - 1) {
                this.currentSlide = 0;
            }
            this.changeSlide(this.currentSlide);
        }

        changeSlide(index) {
            this.slides.forEach(slide => {
                slide.classList.remove('slider-slide-active');
                slide.setAttribute('aria-hidden', true);
            });

            this.slides[index].classList.add('slider-slide-active');
            this.slides[index].setAttribute('aria-hidden', false);

            this.currentSlide = index;

            if (this.options.pauseTime !== 0) {
                clearInterval(this.time);
                this.time = setTimeout(() => this.slideNext(), this.options.pauseTime)
            }
        }
    }

    const opts = {
        pauseTime : 4000
    };

    const slide = new Slider('#slider', opts);

3. CSS:

.img-slide {
    max-width: 100%;
    margin: auto;
    object-fit: contain;
}

.slider {
    max-width: 86%;
    height: 340px;
    margin: auto;
    position: center;
    background-size: cover;
    background: #fff center center;
    box-shadow: 5px 10px 18px #888888;
}

.slider-slides-cnt {
    max-width: 100%;
    margin: auto;
    position: center;
}

.slider-slide {
    position: absolute;
    max-width:100%;
    max-height:100%;
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity:0;
    z-index: 0;
}

.slider-slide-active {
    opacity: 1;
    z-index: 1;
}

.slider-slide {
    opacity: 0;
    transition:2s all;
}
.slider-slide-active {
    opacity: 1;
}

Będę wdzięczny za wskazówkę.

Spróbuj użyć jednostek względnych takich jak vw, vh, em.