调整幻灯片大小

Question

我正在尝试调整幻灯片的图像尺寸。当我将它们插入数组并将其编码为幻灯片放映时，裁剪工作就已经结束了。我尝试在CSS中使用对象位置，但是可以一口气更改所有图像，对一个图像有效的方法不一定对其他图像有效。

这是HTML：

 <container class="main-img-cont">
   <img class="main-img" alt="">
 </container>

这是CSS：

    .main-img-cont {
    width: 100%;
    height: 650px;
    display: flex;


    img {
        width: 100%;
        object-fit: cover;
        object-position: 0 30%;
    } // closes img
} // closes .main-img

Javascript：

window.onload = () => {
    var mainImg = document.querySelector('.main-img');
    let slideshow = [
        '../img/jevon_cochran_pelourinho.jpg',
        '../img/me_in_Pernambues.JPG',
        '../img/quibdo_boat_ride.jpg'
    ];
    var index = 0;
    var interval = 1000;
    function slide() {
        mainImg.src = slideshow[index];
        index++;
        if (index >= slideshow.length) {
            index = 0;
        }
    }

    setInterval(slide, interval);
}