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 example

同样，看这个CSS solution使用

td img {
    width: 100%
}​