拉伸图像高度css

Question

我正试图让两张图片填满一个单元格。两者都设置为100％的宽度，水平拉伸是完美的。两者都设置为50％的高度，一个是完美的，另一个与细胞重叠并溢出到它下面的细胞中，因为它没有伸展到我指定的高度，而是基于宽度的比例高度。

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

如果你看到，底部图像溢出到它下面的单元格。我希望它能够很好地适应它所处的单元格而且我不在乎它是否看起来很有趣。

编辑：似乎问题在于使用div的百分比高度。如果使用em或像素，它会正确缩放，但百分比会变得很疯狂。

Answer 1

试试这段代码：

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

或 css

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

Answer 2

你可以做这样的事情

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

我认为你们两个图像的高度不同，你们会遇到问题...尝试使图像高度相同，共享50％...