Image inside table make it go overflow even with height blocked on 100%

I'm going crazy, I have my website(http://ift.tt/1HWbbxg) divided by three frames(three rows), in the first one I have a table as menu, it uses around the 30 % of height of the screen. In this table i put some images, the table is set to 100% to fit the frame and the image are set to fit the cell(only in height, i don't care about width) so what i was expecting was the image to fit in height without overflow, but the result is the image going out of the frame from the bottom and not being displayed.

Here is an example: http://ift.tt/1g8rY9p

(I used a div to simulate the frame as parent)

<div style="height : 10%">
<table style="height: 100%; table-layout:fixed">
    <tr height="65%">
        <img src="http://ift.tt/1g8rY9r" style="height:100%"/>
    </tr>
    <tr heigth="35%">
        <img src="http://ift.tt/1g8rY9t" style="height:100%"/>
    </tr>
</table>

Tried to set the table-layout to fixed and the image display property to block but everything was useless.

I hope you will help. Thanks in advance Bye