html - div 显示内图像的自动宽度 :table so they are of the same height

Question

我想在父 display:table div 中显示具有 display:table-cell 样式的 div 内的图像。图片高度不一，但都超过400px。我在它们上设置了 max-height: 200px 。它在 Chrome 中运行得很好，它会自动计算每个单元格的宽度，以便图像的高度大致相同 (±2px)。但是，它在 IE 中不起作用，因为在 IE 中，尽管 max-width 和/或 width 设置为 100%，表格仍会延伸到父 div 之外。要修复它，可以使用 table-layout:fixed ，但图像的高度不同。有谁知道如何让它发挥作用？谢谢。

JsFiddle:jsfiddle.net/6qdjdrLe/4

问题是在 IE 中，即使使用 table、tr 和 td 标签，表格和表格行也会超出容器的宽度:jsfiddle.net/6qdjdrLe/7 。表格布局修复了这个问题，但生成了不同高度的图像。我希望图像具有相同的高度，并且还使表格不会溢出父 div。希望IE更聪明。

Answer 1

img {
    height: auto;
    max-height: 200px;
    vertical-align: middle;
    width: 100%;
}