html - 防止 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 中不起作用!即将修复:

将 tr 的高度设置为 33%:

table.contents tr {
    height: 33%;
}

将内部 td 设置为 block 元素并具有 100% 高度；给它相对定位:

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

将您的图像设置为 max-width 和 max-height 为 100%。同样设置为绝对定位，锚定在左上角:

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

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

应该可以! (Fiddle)