基于图像的div缩放

Question

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

我的网站在通常的屏幕尺寸上看起来如何，但正在考虑缩放。我在 div 内设置了幻灯片放映图像，并希望保持图像纵横比并相应地更改 div 大小。目前宽度可以缩放，但我无法缩放高度。我尝试在下图中的两个 div 中添加高度 %，但随后 div 高度就没有了。幻灯片上的高度当前设置为 216.9 像素，这适用于普通屏幕，但显然一旦缩放它就会变得太高。我最好的解决方法是什么？我在想一些关于最大高度的事情。

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

如果你希望你的高度是动态的，你应该总是使用 height:auto; 不要使用任何 % 或 px 值