强制表格单元格宽度/高度适合 div

Question

我有一张图片网格（7x7 表格）。 我想将该表格/网格自动调整到根据显示器显示大小进行调整的流体大小的 div 中。 我希望表格不要超过 div 的边界，宽度和高度都不会，而是占据最大面积，同时保持每个表格单元格与所有其他表格单元格的高度和宽度相同。

我知道这可能很难从我的描述中想象出来。基本上，所有表格单元格都需要强制为一个精确的正方形（相同的宽度/高度），但该尺寸可能会根据显示尺寸的大小而增长或缩小。并且任何表格都不应超出该 div 的可见屏幕区域。

强制 width: 100% .. 很容易，但高度可能太大。 我想在 css 中执行此操作，但我对任何可行的方法都持开放态度。 有什么想法吗？

Answer 1

因此，您希望在表格网格中有图像，并让它响应窗口大小调整以始终适合。

标记（在此示例中，我的网格是 3x3，但对于 7x7 的工作方式相同，只需添加更多数据单元格和行）。

<div id="wrapper">
    <table>
        <tr>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
        </tr>
        <tr>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
           <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
        </tr>
        <tr>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
        </tr>
    </table>
</div>

CSS：

#wrapper{width: 100%;}

#wrapper table {width: 100%;}

#wrapper table tr td {width: 33%;}

#wrapper table tr td img {width: 100%;}

使用了一些来自 Flickr 的随机图片。

希望对你有帮助。