如何將圖像放入高度為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> 

預期結果：

更新：是否可以通過flex修復它？

Answer 1

這是您需要的嗎？

 .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

您必須給它指定一個特定的高度（例如200px），否則高度不能為100％。 如果您有一個高度為200像素的框； 您可以將圖像高度設為100％，即200px