Change the size of image depending on size of table row

Question

I have something that looks like this:

<table>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    ...
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
 </table>

The objective is, if possible, to have the image to "kinda" ajust the size of the row.
Let's say, the image is of size 200x200 (in px). I want to image to shrink up to 100px if the row where it is thinner then the size of the image (it it didn't have the image).
For example:

• If, without the image, the row is < 100px height, with image, it becomes 100px height

• If, without the image, the row is 140px height, with image, it stays 140px height

• If, without the image, the row is 200px height, with image, it stays 200px height

• If, without the image, the row is 260px height, with image, it stays 260px height but the image does not get any big than the 100%, which is the 200px.

I have already tried using a min-height + height + max-height for both the td and the img tags but nothing was changing from the browser's perspective.

Notes:

• I'm using the doctype for XHTML 1.1

• I don't need answers that require JavaScript. I already know how to do with JS (even without jQuery). I want a CSS only answer.

Answer 1

You can try this code:

<table width="100%" border="1">
<tr>
    <td height="100">
            <img src="http://dystroy.org/re7210/img/tartare-saumon-creme-salade-harengs-pommes-de-terre-800.jpg" style="width:auto; height:100%;"/>
    </td>
</tr>
</table>​​​​​​​​​​​​​​​​

See the DEMO