Question

I have the following code:

<table>
    <tr>
        <td class="first">
            <img src="ReallyLargeImage.png" />
        </td>
        <td class="second">
            One line of text<br />
            Another line of text<br />
        </td>
    </tr>
    <tr>
        <td class="first">
            <img src="AnotherReallyLargeImage.png" />
        </td>
        <td class="second">
            This<br />
            has<br />
            four<br />
            lines<br />
        </td>
    </tr>
    ...
</table>

I want the heights of td.second to determine the height of each row, and the images in td.first to scale down (keeping their size ratio) to fit that height.

It’d be nice if I could do it with just CSS/attributes to keep things neat, javascript will work too.

Answer 1

CSS

.first img { display: none; }

JS

$("table tr").each(function(){
    $(this).find(".first img").css("max-height", 
        $(this).find(".second").height()).show();
});​

First you can hide the images with css so that the height() calculation isn’t skewed by the image size. If it’s not hidden the height calculation seems way off for some reason. Maybe a jQuery bug? Then once you set the max-height you can show the image.

---

Example: http://jsfiddle.net/hunter/c3jP6/