根据图片

Question

我目前正在开展一个项目，作为我在学校的数字课程的一部分，并遇到了一个问题。

我的网站看起来我想要的通常屏幕尺寸，但我正在寻找缩放。我在div中设置了幻灯片图像，并希望保持图像宽高比并相应地更改div大小。在宽度缩放的那一刻，我无法达到高度。我已经尝试将高度％'添加到下图中的两个div中，但是div高度却没有任何结果。幻灯片放映时的高度目前设置为216.9px，这适用于普通屏幕，但显然一旦放大它就会变得太高。解决这个问题的最佳方法是什么？我正在思考最大高度的问题。

TLDR：图像是我希望它在缩放时的样子。目前div的高度仅用px完成。

相关守则如下。

@keyframes fade {
    0% {
        opacity: 0;
    }
    11.11% {
        opacity: 1;
    }
    33.33% {
        opacity: 1;
    }
    44.44% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.fadein {
    position:relative;
}
.fadein img {
    position:absolute;
    left:0;
    right:0;
    opacity:0;
    animation-name: fade;
    animation-duration: 9s;
    animation-iteration-count: infinite;
}
.fadein img:nth-child(1) {
    animation-delay: 0s;
}
.fadein img:nth-child(2) {
    animation-delay: 3s;
}
.fadein img:nth-child(3) {
    animation-delay: 6s;
}
#slideshow2 {
    width: 20%;
    height: 172px;
    background: rgb(209, 211, 214);
    background: rgba(209, 211, 214, .5);
    border-style: solid;
    border-width: 2px;
    box-shadow:3px 3px 6px #A8A8A8;
    margin: 30px;
}
#wrap3 {
    display: flex;
    justify-content: center;
    width: 100%;
}
img {
    max-width: 100%;
}

                <div id="wrap3">
                    <div id="slideshow2" class="fadein">

                        <img src="../Images/MicroQuads/Microquad1.jpg" alt="First">
                        <img src="../Images/MicroQuads/Microquad2.JPG" alt="Second">
                        <img src="../Images/MicroQuads/Microquad3.JPG" alt="Third">
                    </div>
                    <div id="slideshow2" class="fadein">
                        <img src="../Images/FreeStylePictures/Freestyle1.jpg" alt="First">
                        <img src="../Images/FreeStylePictures/Freestyle2.jpg" alt="Second">
                        <img src="../Images/FreeStylePictures/Freestyle1.jpg" alt="Third">
                        <img src="../Images/FreeStylePictures/Freestyle2.jpg" alt="Fourth">
                    </div>
                    <div id="slideshow2" class="fadein">
                        <img src="../Images/Racing Quads/Race1.jpg" alt="First">
                        <img src="../Images/Racing Quads/Race2.jpg" alt="Second">
                        <img src="../Images/Racing Quads/Race3.jpg" alt="Third">
                    </div>

                </div>

的目标： 感谢

  

Answer 1

如果你想要你的身高是动态的，你应该总是使用身高：自动; 不要使用任何％或px值