如何使用CSS将图像按高度拟合到表格单元格中（未明确定义高度）

Question

我有一张桌子。它的高度来自内容的大小。连续的第一个单元格有一个文本，它定义了高度。连续的第二个单元格具有图像。图像应该适合（缩小）到行的高度。

这就是我需要的

我所做的是在Chrome中工作，但它在IE中不起作用，请看一下。

jsfiddle

#t{
			background: aliceblue;
			display: table;    			
		}
		.r{
			display:table-row;
		}
		.c{
			display:table-cell;
			border:solid black 1px;
			background: aqua;
			vertical-align: middle;
			position: relative;			
		}
		#i{
			height: 100%;    			
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

<div id='t'>
		<div class='r '>
			<div class='c'>
				a<br>
				b<br>
				c<br>
				d<br>
				e<br>
				f<br>
			</div>
			<div class='c'>
				<img id="i" src="http://www.cnc3.co.tt/sites/default/files/content/Glee.png">
			</div>
		</div>
	</div>

Answer 1

我建议把图片作为背景。

jsfiddle

#t{
			background: aliceblue;
			display: table;
			width: 300px;
		}
		.r{
			display:table-row;
		}
		.c{
			display:table-cell;
			border:solid black 1px;
			background: aqua;
			vertical-align: middle;
			position: relative;
            width:50%;
		}
		#i{
			height: 100%;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

#img_cell{
	background-image: url("http://www.cnc3.co.tt/sites/default/files/content/Glee.png");
	background-repeat: no-repeat;
	background-position: center; 
	background-size: contain;
}

<div id='t'>
		<div class='r '>
			<div class='c'>
				a<br>
				b<br>
				c<br>
				d<br>
				e<br>
				f<br>
			</div>
			<div id='img_cell' class='c'>
            </div>
		</div>
	</div>

Answer 2

＆＃13;

＆＃13;

Try this way:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="top">
      a<br>
      b<br>
      c<br>
      d<br>
      e<br>
      f<br></td>
    <td align="center" valign="middle"><img id="i" src="http://www.cnc3.co.tt/sites/default/files/content/Glee.png"></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

这可以确保图像不会比父图像（在本例中为表格单元格）大。