javascript - 调整幻灯片的图像大小

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);
}

标签： javascriptcssimageslideshow