Question

我想要的是每行的高度为桌面高度的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)

Answer 2

我认为你希望从内容中删除额外的空间，所以内容（文本或img）看起来像是适合表格单元格，所以我建议从css中删除它：

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

防止HTML表调整大小以适合内容

2 个答案: