固定高度表，限制表格单元格内的大图像

Question

我有一个固定高度的桌子，里面有一个带有图标图像的表格单元，需要约束到表格单元格的高度。但是，无论我尝试过什么，图像都会强制表格展开，或者只是忽略height: 100%。

这是未经修改的JSFiddle，具有初始布局和样式。

我根据其他SO答案尝试过的事情：

• 确保img的所有父母都有100％身高（source）：JSFiddle
• table-layout:fixed，white-space: nowrap和overflow: hidden（source）：JSFiddle
• 内部position: absolute div将其从布局计算中排除（source）：JSFiddle
• 内部float: left div将其从布局计算中排除：JSFiddle

更新：

我不想手动设置表格单元格高度，因为在实际布局中，表格适合顶部栏：

所以表格内的所有高度都应该是动态的

Answer 1

是否可以将固定高度赋予td元素而不是表格？像这样：

table tr td { width: 100px; height: 100px; border: 3px solid black; }
img { display: block; height: 100%; width: auto; }

http://jsfiddle.net/webmaas/m5wxyv9j/2/

Answer 2

如果我问的话，为什么图标需要在表格内？

Answer 3

试试这个，它在我的最后工作

img { height: 100%; width: 100%; }

Answer 4

在css flex上发现了一篇很酷的文章，结果表明它比表格更容易用于多列布局。

带一个图标的解决方案

JSFiddle

有3个图标的解决方案

.flexcontainer { display: flex; width: 300px; height: 50px; border: 3px solid black }
.column { flex: 1; height: 100%; }
img { height: 100%; width: auto; display: block; margin: auto }

<div class="flexcontainer">
    <div class="column">
        <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-set/2133/flat_icons-graficheria.it-13.png"/>
    </div>
    <div class="column">
        <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-set/2133/flat_icons-graficheria.it-13.png"/>
    </div>
    <div class="column">
        <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-set/2133/flat_icons-graficheria.it-13.png"/>
    </div>
</div>