我如何使我的轮播和图像具有响应性？

Question

我想制作一个覆盖主页 50% 的图像滑块。但不知何故我不能让这些照片敏感。我希望我的旋转木马在调整大小时缩小。我刚刚在互联网上找到了一些使用 Jquery 的解决方案，但我想要 vanilla javascript 或纯 css & scss 解决方案。如何使我的滑块和照片具有响应性？ 演示：https://codepen.io/BerkayAkgurgen/pen/qBqMxeo

   <main>
        <div class="slider-container">
            <div class="slider">
                <div class="slider-img">
                    <img src="./img/batman-banner.jpg" alt="">
                </div>
            </div>
            <div class="slider">
                <div class="slider-img">
                    <img class="deneme2" src="./img/lord-of-the-ring.jpg" alt="">
                </div>
            </div>
            <div class="slider">
                <div class="slider-img">
                    <img src="./img/avengers.jpg" alt="">
                </div>
            </div>
            <div class="slider">
                <div class="slider-img">
                    <img src="./img/batman.jpg" alt="">
                </div>
            </div>
        </div>
    </main>

 img {
    display: block;
    width: 100vw;
    height: 100%;
    object-fit: cover;
}

main {
    position: relative;
    width: 100vw;
    height: 500px;
}

.slider {
    width: 100vw;
    max-height: 500px;
}

.slider-img {
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}