CSS/HTML: Cannot modify img's height inside display: table

I'm trying to make a centered, 100% high layout that has NO FIXED width (argh). Everything seems to be ok with the solution below, apart from the img that I need to scale to height: 100%, that doesn't scale inside table-cell (outside of the div everything's ok). EDIT: I am able to set fixed height like 100px or so, both in css and tag. Why doesn't this work with %?

<div id="center">
<div id="tcontainer">
  <div id="tleft">a</div>
  <div id="tright"><img id="bgright" src="images/bgright1.jpg" height="100px" /></div>
</div>
<开发者_StackOverflow中文版/div>

And styles:

html,body {
 margin:0;
 padding:0;
 height:100%; /* needed for container min-height */

 font-family:arial,sans-serif;
 font-size:small;
 color:#666;
}
#bgrepeat { /* unnecessary ATM */
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: 0;
}

#bgright { /* HERE THE PROBLEM */
 height: 100%;
}
img { border: 0; /*float: left;*/ }

#center { 
 text-align: center;
 height: 100%;
}
#tcontainer {
 text-align: left; /* POTRZEBNE ? */
 background: red;
 height: 100%;
 display: table;
 margin: 0 auto;
}
#tleft {
 display: table-cell;
} 
#tright {
background: pink;
 display: table-cell;
}

---

OK, so the problem has been baldy formulated. I've had just forgotten to pass "height: 100%" in consecutive children. It didn't have anything to do with display: table nor images.