2

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

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

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

4

1 回答 1

0

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

标记（在此示例中，我的网格是 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 的一些随机图像。

希望能帮助到你。

于 2012-11-03T22:45:54.237 回答