基於圖像的div縮放

我目前正在開展一個項目，作爲我在學校數字課程的一部分，並且遇到了問題。基於圖像的div縮放

我有我的網站看我如何在通常的屏幕大小，但我正在尋找縮放。我有一個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>

目標：