How to stop an image stretching the height of a cell beyond a limit

Question

I've got a table row that I want to stay at a certain height (50px) but when I put an image into it then it stretches it beyond that which is entirely not what I want. When the image is inserted I want it to have it's bottom line in line with the bottom of the cell and the rest of the image floating above it.

Does anyone have any ideas?

Here's an example of what I mean

http://jsfiddle.net/CH7Dq/

Answer 1

In your CSS:

.nyanRow, .nyanRow img
{
    max-height: 50px;
}​

Is that what you are looking for?

Answer 2

Your jsfiddle does not seem to be working (the image is not valid), but you can try setting a class for the table row like:

max-height: 50px;
overflow: hidden;

This will keep the contents from making the row larger than 50px high.

Answer 3

If you are wanting the image to be resized so it fits set a height on your image too; otherwise, you want to set overflow:hidden; on your row.

.nyanRow, .nyanRow img
{
    max-height: 50px;
}​

Live DEMO