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

Question

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

我知道这可能很难从我的描述中看出来。基本上，所有表格单元格都需要被强制为精确的正方形（相同的宽度/高度），但是这个尺寸可能会增大或缩小，具体取决于显示尺寸的大小。并且没有一个表应该超出该div的可见屏幕区域。

强制宽度：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的一些随机图像。

希望能帮助到你。