CODEWITHSUNDEEP
htmlcss
Entity
Entity

Reputation: 8202

table row height determined by specific cell

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.

Upvotes: 2

Views: 1426

Answers (3)

user1337735
user1337735

Reputation:

Do You Want to change the size of the image dynamically ? so then you have to get height of the td.second ,You cannot do that with CSS , You definitely gonna need javascript.

you can get the height of the element like this

var divh=document.getElementById('id').offsetHeight;

this work fine with a div,but I'm not sure with a table cell, any way i found some discussion in a other form ,see if you can get any help from them

Get Table Cell Height’s with Javascript
How to get pixel height of a div?

Once you get the height of the element you can set height of the image with javascript.

Upvotes: 0

hunter
hunter

Reputation: 63512

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/

Upvotes: 2

SoEnLion
SoEnLion

Reputation: 183

You can use this :

<img style="width:100%;height:100%;"/>

just to fit/scale automatically your image

Upvotes: 0

Related Questions