Избегать изменения размера слайд-шоу в соответствии с отображаемым изображением?

Я сделал слайд-шоу с анимацией затухания изображений в div. Однако, когда отображается следующее изображение, div становится меньше/больше в соответствии с изображением, и страница автоматически прокручивается, а я этого не хочу. Как я могу этого избежать?

Я написал функцию, которая после загрузки страницы находит самое большое изображение и устанавливает для div высоту этого изображения, чтобы всякий раз, когда отображается новое изображение, высота div не менялась. Однако проблема заключается в том, что когда браузер становится меньше/больше, значение высоты div не меняется, даже если я переустанавливаю его каждый раз, когда браузер меняет размер, используя прослушиватель изменения размера (переменная "biggestImage").

JQuery

var slideIndex = 0;
showSlides();
divResizeIssue();

function showSlides() {
    var slides = $(".images");
    slides.each(function(){
        $(this).fadeOut(500).delay(490);        
    });

    slideIndex++;

    if (slideIndex > slides.length) {
        slideIndex = 1;
    } 
    slides.each(function(index){
        if (index == slideIndex-1){
            $(this).fadeIn(500).delay(490);
        } 
    });
    setTimeout(showSlides, 5000);
}

function divResizeIssue(){
    var biggestImage;
    var object;

    var slides = $(".images");
    var firstLoad = true;

    if (firstLoad){
        slides.each(function(index){
            if (index == 0 || $(this).outerHeight() > biggestImage){
                biggestImage = $(this).outerHeight();
                object = $(this)[0]
            }
        });
        slides.each(function(){
            if ($(this)[0] != object){
                $(this).outerHeight(biggestImage);
            }
        });
        firstLoad = false;
    }

    $(window).on('resize', function(){
        biggestImage = 0;
        object = null;
        slides.each(function(index){
            if (index == 0 || $(this).outerHeight() > biggestImage){
                biggestImage = $(this).outerHeight();
                object = $(this)[0];
            }
        });
        slides.each(function(){
            if ($(this)[0] != object){
                $(this).outerHeight(biggestImage);
            }
        });
    });
}

HTML

<div id = "top-div" class = "row">
        <div class = "row">
            <h1 class = "col-sm-12">Activities</h1>
            <span class = "col-sm-2"><!-- <button class = "leftButton"></button> --></span>
            <div class = "col-sm-12 col-lg-8">
                <figure class = "images">
                    <figcaption class = "caption">Outdoor</figcaption>
                    <img class = "img-fluid" id = "Outdoor" src = ".\src\Hiking.jpg">
                </figure>
                <figure class = "images">
                    <figcaption class = "caption">Indoor</figcaption>
                    <img class = "img-fluid"  id = "Indoor" src = ".\src\indoor.jpg">               
                </figure>
                <figure class = "images">
                    <figcaption class = "caption">Join Us!</figcaption>
                    <img class = "img-fluid" id = "Member" src = ".\src\member.png">        
                </figure>
            </div>
            <span class = "col-sm-2"><!-- <button class = "rightButton"> --></button></span>
        </div>
    </div>

CSS

#top-div {
    width: 100%;
    margin-top:90vh;
    background: #AB3F05;
    text-align: center;
    height: auto;
}
figure img{
    padding-left: 5vh;
    padding-right: 5vh;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}
.images{
    position: relative;
}

Если у вас есть лучшее предложение, пожалуйста, предложите, или если вы можете сказать мне, что не так с моим кодом, это было бы здорово.