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

Question

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

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;
}