Question

我用div中图像的淡入淡出动画进行了幻灯片放映。但是，当下一张图像显示时，div根据图像和页面自动滚动而变小/变大，我不希望这样。如何避免这种情况？

我编写了一个函数，一旦页面加载，它将找到最大的图像，并将div设置为具有该图像的高度，以便每当显示新图像时，div的高度都不会改变。但是，问题在于，当浏览器变小/变大时，即使我每次在浏览器上使用resize侦听器（“ 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>

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的大小。 margin: 0 auto将.image-container置于其父对象内部。

.image

width: 100%扩展了img标签，使其成为其父对象（.image-container）的宽度。

固定的height: 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，因此您可能需要将其改回。 / p>

Answer 2

我所做的解决方案是在屏幕尺寸变化时对高度值进行编码，我并不是很想对其进行硬编码，但这是我现在唯一想到的方法。

CSS

@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大小？

2 个答案:

CSS

.image-container

.image

HTML