Stretch image height css

Question

I'm trying to get two images to fill a cell. Both are set to widths of 100% and the horizontal stretch is perfect. Both are set to heights of 50%, one is perfect, the other overlaps the cell and spills into the cell below it because it doesn't stretch to the height I specified but a proportional height based off the width.

http://shears-001-site1.mywindowshosting.com/bet.aspx

If you see, the bottom image is spilling over to the cell below it. I want it to fit nicely in the cell it is in and I don't care if it looks funny.

EDIT: It seems like the issue is with using percent heights for the divs. If em or pixels are used it scales correctly, but percent and it just goes crazy.

Answer 1

Try this code:

<td style="width: 50%; vertical-align: top;">
  <img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="width: 100%; height: 100%;">
</td>

or in css

img
{
 width: 100%; height: 100%;
}

Answer 2

You can do something like this

Fiddle

td{
    border: 1px solid green;
    position: relative;
    height: 100px;
    width: 200px;
}

.test{
   border-bottom-style: solid; 
   background-color: yellow; 
   width: 100%; 
   height: 50%;    
   position: relative;
}

img{
    position: relative;
    width: 100%; 
    height: 100%;     
}

Answer 3

i think ur both images are differ in hight thts y u r getting the problem ...try to make both image same height and the share 50 % both ...