防止HTML表格

Question

我有以下代码：http://jsfiddle.net/GUSE5/5/

我想的是，每行有身高表高度的33％，无论内容和图像尺寸调整到适合细胞，但没有失去比例。

<table class="container"><tr><td> 
<table class="contents" border=1> 
    <tr> 
     <td> 
       Top content 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <img src="http://www.hdwallpapersview.com/wp-content/uploads/2013/05/free-nature-backgrounds-wallpapers.jpg" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Bottom content 
     </td> 
    </tr> 
</table> 
</td></tr></table> 

CSS：

table.container { 
    width: 200px; 
    height: 300px; 
} 

table.contents { 
    width: 100%; 
    height: 100%;  
} 

table.contents tr { 
    height: 33%; 
} 

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

Answer 1

试试这个。

设置单元格的高度：

table.contents td { 
    height: 33%; 
} 

设置单元格进行相对定位，这样我们就可以使用绝对定位里面：

table.contents td { 
    height: 33%; 
    position: relative; 
} 

设置你的图像具有max-width和max-height的100%。还将其设置为具有绝对定位，并将其固定到左上角：

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

    position: absolute; 
    top: 0; 
    left: 0; 
} 

似乎有效。 (Fiddle)

编辑：这不适用于Firefox！一个修复上来：

设置的高度tr33%到：

table.contents tr { 
    height: 33%; 
} 

设置内td是一个block元件和具有100%高度;给它相对定位：

table.contents td { 
    display: block; 
    height: 100%; 
    position: relative; 
} 

设置你的图像具有max-width和100%max-height。还将其设置为具有绝对定位，并将其固定到左上角：

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

    position: absolute; 
    top: 0; 
    left: 0; 
} 

应该工作！ (Fiddle)

Answer 2

我想你希望从内容中删除多余的空间，所以内容（文字或图片）看起来像表格单元格配件，所以我建议从CSS中删除此：

table.contents { 
/* width: 100%; 
height: 100%; */ 
}