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

Question

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

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

Answer 1

一般来说，在进行幻灯片放映时，只需使用 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

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

/*Changed Below*/

.image-container {
    width: 50%;
    margin: 0 auto;
}

.image {
  width: 100%;
  height: 400px;
}

.image-container

width: 50% 使得 .image-container 在浏览器视口(viewport)更改宽度时调整大小。 margin: 0 auto 将 .image-container 置于其父级的中心。

.图片

width: 100% 将 img 标签拉伸(stretch)为其父级(.image-container)的宽度。

固定的高度:400px可防止高图像扩大父级的高度。

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="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>

我刚刚将 class="images"重命名为 class="image-container"并向 img 元素添加了一个图像类，还更改了图像上的 src 以使用 picsum，因此您可能想将它们更改回来。