Question

我希望我的桌子宽度为屏幕的80％。

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

问题是图片太大了 - 我希望它们的宽度将由桌子宽度均匀确定（每个单元格将获得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%
}

Answer 2

做这样的事情：

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

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

当图片太大时设置表格宽度

2 个答案: