How to fit an image inside a table with 100% height?

Question

I can't manage to get the image to fit 100% to the height of a css made table. As you see below, the table and image is totally ignoring the parent element's dimensions.

Everything needs to be dynamically that's why I work with percent.

 .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> 

Expected result:

Update: Is it possible to fix it with flex in any way?

Answer 1

Is this what you need?

 .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> 

Answer 2

you have to give it a specific height like 200px it cant take a height of 100% of nothing. If you had a box with the height of 200px; you can make the image height be 100% which is 200px