html - 如何将表格内 block 元素的最大宽度设置为可视区域的 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 上)。无论有没有 width: 100%，div 都不应超过大小。

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

显然 div 位于 table 中，由于某种原因导致它失败。我们一起达成了解决方案:(来自评论)“如果我设置 style="table-layout: fixed;宽度:100%“对于表格，一切正常”。