изменение размера изображений для слайд-шоу - PullRequest
Новая
       20

изменение размера изображений для слайд-шоу

0 голосов
/ 04 ноября 2019

Я пытаюсь изменить размеры своих изображений для слайд-шоу. Когда я подключаю их к массиву и кодирую их в слайд-шоу, обрезка отключается. Я попытался использовать положение объекта в 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);
}
...