html - 如何将表格内块元素的最大宽度设置为可视区域的 100%？

Question

要理解我的意思，请查看以下代码段：

<table style="width: 100%">
    <tbody><tr><td>
        <div style="width: 100%">
            <img src="myimage.png" />
        </div>
    </td></tr></tbody>
</table>

如果myimage.png小于浏览器窗口，div则渲染 以适合窗口大小。到目前为止，一切都很好。但如果img更大，一切都超出了可视区域。

有没有办法让img宽度设置为“图像的 100%，但不大于可视区域的 100%”？

更新： max-width: 100%对于图像似乎不能在表格内完成工作：http:
//jsfiddle.net/h58Ra/

Answer 1

max-width正是您应该使用的：http: //jsfiddle.net/h58Ra/（在 上img）。div不应该超过有或没有的大小width: 100%。

如果您删除max-width: 100%小提琴中的 ，您会注意到div仍然没有变大，即使img确实如此。

显然div是在里面table，由于某种原因使它失败了。我们一起达成了一个解决方案：（来自评论）“如果我设置 style="table-layout: fixed; 宽度：100%“对于桌子，一切正常”。