100％の高さのテーブルの中にイメージを収めるには？

Question

私はcss製のテーブルの高さに100％収まるように画像を取得することはできません。下に示すように、表とイメージは親要素の次元を完全に無視しています。

すべてを動的にする必要があるので、私はパーセントで作業します。

.img { 
 
    max-width: 50%; 
 
    height: 100px; // <-- This should be able to be dynamic (anything) 
 
} 
 

 
.img .table { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.img .row { 
 
    display: table-row; 
 
} 
 

 
.img .cell { 
 
    display: table-cell; 
 
} 
 

 
.img .row.img-el, 
 
.img .row.img-el .cell { 
 
    height: 100%; 
 
} 
 

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

<div class="img pull-left gap-right bigger"> 
 
    <div class="table"> 
 
    <div class="row img-el"> 
 
     <div class="cell"><img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg" style="height:100%;float:left" /></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell img-text">Hello</div> 
 
    </div> 
 
    </div> 
 
</div>

期待される結果：

更新：それはどのような方法で、フレックスとそれを修正することは可能ですか？

Answer 1

あなたは200pxのような特定の高さを与える必要はありません。何もないのは100％の高さです。 200pxの高さの箱があれば、画像の高さを200％にすることができます

Answer 2

これは必要なのですか？

.img { 
 
    max-width: 50%; 
 
    max-height: 100%; 
 
} 
 

 
.img .table { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.img .row { 
 
    display: table-row; 
 
} 
 

 
.img .cell { 
 
    display: table-cell; 
 
} 
 

 
.img .row.img-el, 
 
.img .row.img-el .cell { 
 
    height: 100%; 
 
} 
 

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

 
.cell img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="img pull-left gap-right bigger"> 
 
    <div class="table"> 
 
    <div class="row img-el"> 
 
     <div class="cell"><img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg" style="float:left" /></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell img-text">Hello</div> 
 
    </div> 
 
    </div> 
 
</div>