img height 100% of table row

user_1002260 0
Viewed 98

If I have HTML like this:

<table>
   <tr>
      <td>
         <img src="a.png">
      </td>
      <td>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
      </td>
   </tr>
</table>

The second column can have a variable number of paragraphs, so the height will be different. Whatever height the row is, I want the image to be that height. I tried this:

img {
   height: 100%;
}

but it didn't seem to do anything. I would like to avoid changing the HTML if possible, can I do this with only CSS?

html-table css html
1 Answers

So the reason I wanted to increase the height of the image, was because the second column can be much larger, which pushes the image way down with the default table vertical centering. Instead of focusing on the image size, I instead just moved the image to the top:

td {
   vertical-align: top;
}

If someone has a solution to the original question I am still interested, but this should do as a workaround.

user_10022600
Related