HTML：当图片太大时设置表格宽度

Question

我希望我的表格具有80％的屏幕宽度。

该表格有一行四列。每个单元格包含一个图像。

的问题是，这些照片是太大了 - 我想这thier宽度将通过表格的宽度来确定均匀 （每个单元将得到屏幕的20％）

和这样的每个画面高度将由其宽度决定。

我该怎么做？

谢谢！

Answer 1

做这样的事情：需要从东西继承了

table { width:80%; } 
td { width:25%; } 
td img { 
    width:100%; 
    height:auto; 
} 

在图像上的宽度，所以一定要确保你把一些类型的宽度上的TD。浏览器应该能够计算它，因为它是一个表格，但如果出于某种原因，您更改为列表标记或其他内容，则需要定义宽度。

Answer 2

这提供了一种简单，优雅和全面响应的解决方案：

HTML：

<table border="1px solid black" width="80%"> 
    <tbody> 
     <tr> 
      <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td> 
      <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td> 
      <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td> 
      <td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td> 
     </tr> 
    </tbody> 
</table> 

看到这个jsFiddle example

同样，看到这个CSS solution使用

td img { 
    width: 100% 
}​