html - 图片太大时设置表格宽度

Question

我希望我的表格宽度为屏幕的 80%。

该表有 1 行 4 列。每个单元格包含一个图像。

问题是图片太大 - 我希望它们的宽度将由表格宽度均匀确定（每个单元格将占据屏幕的 20%）

并且每个图片的高度将由它的宽度决定..

我怎样才能做到这一点？

Answer 1

这提供了一个简单、优雅且完全响应的解决方案：

HTML：

<table border="1px solid black" width="80%">
    <tbody>
        <tr>
            <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
            <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
            <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
            <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
        </tr>
    </tbody>
</table>

请参阅此jsFiddle 示例

同样，请参阅此CSS 解决方案，使用

td img {
    width: 100%
}​

Answer 2

做这样的事情：

table { width:80%; }
td { width:25%; }
td img {
    width:100%;
    height:auto;
}

图像上的宽度需要从某些东西继承，因此请确保在 TD 上放置某种宽度。浏览器应该能够计算它，因为它是一个表格，但是如果由于某种原因您更改为列表标记或其他内容，则需要定义宽度。