フレックス項目に画像を自動サイズ変更

Question

私は、次のようなHTMLがあります。以下のCSSで

<div class="main-container"> 
    <h1>A title</h1> 
    <p>Some text</p> 
    <div class="sub-container"> 
     <img src=""> 
    </div> 
</div> 

：

.main-container{ 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
} 
.sub-container{ 
    flex-grow:2; 
    background-color: green; 
} 

を「私は上記のコンテナのサイズがわからないことに注意してくださいメインコンテナ "と呼ばれる。私はflexを使用しています。なぜなら、「メインコンテナ」内のdivを残りのスペースをすべて占有したいからです。

私が望むのは、両方の方向（高さと幅）で親のサイズに適合する「サブコンテナ」内に画像を持つことです。今、「サブコンテナ」にイメージを追加すると、オーバーフローして、まったくスケーリングされません。 私はフレックスが直接の子供（すなわち、 "サブコンテナ"ではなく内部のイメージ）でのみ動作することを知っています。私は「サブコンテナ」でもフレックスを使用しようとしましたが、満足できるものは得られませんでした。

あなたはこのクラスを使用することができます

Answer 1

：

.img-fluid { 
    max-height:100%; 
    height:auto; 
} 

が、私はこれがここであなたを助けるだろうと確信しているあなたのimg