画像に基づくDivスケーリング

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の値を使用しないでください