表格单元格中的相对图像大小

Question

我希望我的表格行是屏幕宽度的100％和50px高。如果我的表中只有一个段落元素，那么它的大小适当。如果表格中有图像，则该行会扩展为图像的大小。

JSFiddle：http://jsfiddle.net/o70xtmov/

HTML：

<table>
    <tr>
        <td>
            <img src="http://placehold.it/120x120&text=bad-size" alt="project-icon" title=""/>
        </td>
    </tr>
</table>

<table>
    <tr>
        <td>
            <p>good-size</p>
        </td>
    </tr>
</table>

CSS：

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

table:first-of-type {
    background-color: #666666;
}

table:last-of-type {
    background-color: #888888;
}

tr {
    width:100%;
    height:50px;
}

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

Answer 1

您是否需要将高度设置为tr标签？那不起作用。这个怎么样？如果内容较高，td将调整大小。

http://jsfiddle.net/bwvvvn0y/

table {
    width: 100%;
}

tr {
    background: #888;
}

td {
    height: 50px;
}

Answer 2

尝试：

img {
    height:50px;
    width:auto;
}

（经过测试并且有效）