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

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