Javascript 避免根据显示的图像调整幻灯片div的大小？

我用一个div中图像的淡入淡出动画做了一个幻灯片。但是，当下一个图像显示时，div会根据图像和页面自动滚动而变小/变大，我不希望这样。我怎样才能避免这种情况

我编写了一个函数，一旦页面加载，它就会找到最大的图像，并将div设置为该图像的高度，这样每当显示新图像时，div高度就不会改变。但是，问题是，当浏览器变小/变大时，div高度的值不会改变，即使每次浏览器使用on resize listener（“biggestImage”变量）更改大小时，我都会调整div高度的大小

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>

---

如果您有更好的建议，请提出建议，或者如果您能告诉我我的代码有什么问题，那就太好了。

一般来说，当您使用gimp或photoshop手动将图像调整到相同的分辨率时，进行幻灯片放映会容易得多，看起来也会更好

然而，如果出于任何原因，您不能这样做，您可以使用CSS中的百分比来创建动态长度

这是我想到的

//changed '.images' to '.image-container' also removed the divResizeIssue //function because we don't need it

var slideIndex = 0;
showSlides();

function showSlides() {
    var slides = $(".image-container"); //here
    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);
}

CSS .图像容器

宽度：50%

使.image容器在浏览器视口更改宽度时调整大小<代码>边距：0自动将.image容器置于其父容器的中心

.形象

width:100%

streach将img标记设置为其父级（即.image容器）的宽度

固定的

高度：400px

可防止高图像扩展父图像的高度

HTML

活动
户外的
室内的
加入我们吧！

---

我刚刚将class=“images”重命名为class=“image container”，并在img元素中添加了一个image类，还将图像上的src更改为使用picsum，因此您可能希望将其更改回去。

我所做的解决方案是在屏幕大小更改时对高度值进行编码，我不太喜欢硬编码，但这是我现在唯一能想到的办法

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

@media only screen and (min-width: 576px) {
    /*Change slides height to 950px when at sm (576px)*/
    #top-div{
       height: 950px;
    }
}

@media only screen and (max-width: 576px) {
    /*Change slides height to 440px when greater than sm*/
    #top-div{
       height: 440px;
    }
}

---

感谢您的帮助，但是当浏览器变小时，为图像设置一个固定的高度会使图像被挤压。

<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="image-container">
                    <figcaption class="caption">Outdoor</figcaption>
                    <img class="image img-fluid" id="Outdoor" src="https://picsum.photos/200/300">
                </figure>
                <figure class="image-container">
                    <figcaption class="caption">Indoor</figcaption>
                    <img class="image img-fluid"  id = "Indoor" src="https://picsum.photos/300/300">               
                </figure>
                <figure class="image-container">
                    <figcaption class="caption">Join Us!</figcaption>
                    <img class="image img-fluid" id = "Member" src="https://picsum.photos/400/300">        
                </figure>
            </div>
            <span class="col-sm-2"><!-- <button class="rightButton"> --></button></span>
        </div>
    </div>

@media only screen and (min-width: 576px) {
    /*Change slides height to 950px when at sm (576px)*/
    #top-div{
       height: 950px;
    }
}

@media only screen and (max-width: 576px) {
    /*Change slides height to 440px when greater than sm*/
    #top-div{
       height: 440px;
    }
}