フレックスボックスでのイメージの高さの伸び

Question

私はすでにこれについて簡単に調査しました。私はdivにimgを入れ、img幅を100％にしました。これは高さに影響を与えるはずです。私はここで何が起こっているのか分からない。次のフレックスボックスで適切なアスペクト比を維持するためにイメージが必要です。 CSSでの画像のための

.container { 
 
    display: flex; 
 
    position: relative; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: stretch; 
 
    height: 100vh; 
 
    width: 80%; 
 
    /*padding-top: 2%; 
 
\t padding-bottom: 18%; 
 
    margin: 5% auto 8% auto; */ 
 
    background-color: white; 
 
    border: 2px solid red; 
 
} 
 
.top { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border: 2px solid blue; 
 
} 
 
.top * { 
 
    1 1 50%; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-content: center; 
 
    height: 100%; 
 
} 
 
.bottom { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    align-items: flex-start; 
 
    border: 2px solid orange; 
 
} 
 
.top, 
 
.bottom { 
 
    flex: 0 0 100%; 
 
    height: 50%; 
 
} 
 
.topa { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-content: center; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: orange; 
 
} 
 
.topa div img { 
 
    width: 100%; 
 
}

<div id="bigwrap"> 
 
    <div class="container"> 
 
    <div class="top"> 
 
     <div class="topa"> 
 
     <div> 
 
      <img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" /> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" /> 
 
     </div> 
 
     </div> 
 
     <div class="topb"> 
 
     </div> 
 
    </div> 
 
    <div class="bottom"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

使用最大幅。イメージタグから幅と高さの属性を削除します。または、imgタグとcssのheightプロパティautoを使用してください。

.topa div img { 
    Max-width: 100%; 
    Height:auto; 
} 

Answer 2

フレックスボックスは正しい方法で使用されていません。 はここ

はフレキシボックスは、実際の画像がであった場合、それが役立つだろう

.container { 
 
    position: relative; 
 
    height: 100vh; 
 
    width: 80%; 
 
    background-color: white; 
 
    border: 2px solid red; 
 
} 
 
.top { 
 
    border: 2px solid blue; 
 
} 
 
.top * { 
 
    height: 100%; 
 
} 
 
.bottom { 
 
    border: 2px solid orange; 
 
} 
 
.topa { 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: orange; 
 
    margin: auto; 
 
} 
 
.topa div img { 
 
    width: 100%; 
 
}

<div id="bigwrap"> 
 
    <div class="container"> 
 
    <div class="top"> 
 
     <div class="topa"> 
 
     <div> 
 
      <img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" /> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" /> 
 
     </div> 
 
     </div> 
 
     <div class="topb"> 
 
     </div> 
 
    </div> 
 
    <div class="bottom"> 
 
    </div> 
 
    </div> 
 
</div>