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

我有一个网格（7x7表格）的图像。我想自动适合表/网格到一个流体大小的股利，根据显示器的显示尺寸进行调整。我希望表格不会越过div的边界，既不是宽度也不是高度，但占用最大区域的同时保持每个表格单元格与所有其他表格单元格的高度和宽度相同。强制表格单元的宽度/高度以适合div

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

这很容易强制宽度：100％..但高度可能会太大。我想在CSS中做到这一点，但我愿意接受任何有效的工作。任何想法？

来源

2012-11-03 user1797061

为什么你需要一张桌子呢？更容易与49个div（或直接img），浮动和宽度/高度1/7容器... – jtheman

所以你想在表网格中有图像，并让它响应窗口大小调整始终适合。

标记（在这个例子中，我的网格是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-03 22:45:54

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

回答

相关问题