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的一些随机图片。

希望它有所帮助。

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

1 个答案: