brunoais
brunoais

Reputation: 6866

Change the size of image depending on size of table row

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:

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:

Upvotes: 0

Views: 3726

Answers (1)

Warlock
Warlock

Reputation: 7481

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

Upvotes: 1

Related Questions