我有以下代码: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%;
}
最佳答案
试试这个。
设置单元格的高度:
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)
关于html - 防止 HTML 表格调整大小以适应内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20453676/