1 heigth row mismatch because the presence of an img tag

[nteam]

I have a problem with styling a table with css. Im using a div to wrap up a table element. The problem arises when i insert an img tag into one cell. IT's height changes. I have tried to set the height of the row elements with no luck. Here's the example. My objective is to add an image to fit all the cell space without changing it's size. ill appreciate all the helpNote: all the rows must have the same height and the size must be in percentage.html\[code\]<div id="client"><table> <col id="col1" /> <col id="col2" /> <col id="col3" /> <tr> <td rowspan="3"> <img id="profilePhoto" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTjelu9edzZ0fit_oqWGlHKS8koq1Vc56_u0XiYJynYbQmKSuQTCA" /> </td> <td>2a</td> <td>3a</td> </tr> <tr> <td colspan="2">2b</td> </tr> <tr> <td colspan="2" class="row">2c</td> </tr> <tr> <td>1d</td> <td colspan="2">2d</td> </tr></table>\[/code\]css\[code\]html {height: 100%;padding: 0;margin: 0;}body {height: 100%;padding: 0;margin: 0;}body #client {outline:solid 1px;width: 75%;height: 25%;overflow: hidden;}table {width: 70%;height:100%;table-layout:fixed;}td {text-align: center;border: solid thin;overflow: hidden;}#profilePhoto {height:100%;width:100%;}\[/code\]