Relative image size in table cell

Question

I want my table row to be 100% of the screen width and 50px high. If my table only has a paragraph element in it then it sizes appropriately. If the table has an image in it then the row expands to the size of the image.

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

Is it the problem of you're setting the height to the tr tag? and that doesn't work. How about this? The td will get resized if the content is taller.

http://jsfiddle.net/bwvvvn0y/

table {
    width: 100%;
}

tr {
    background: #888;
}

td {
    height: 50px;
}

Answer 2

Try:

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

(Tested this and it worked)