使图像适合表格单元格宽度百分比（HTML）

Question

我在HTML表格中组织了我的网站内容，并且为每个单元格（百分比）设置了特定的宽度。现在我在组合单元格中有一个相当大的图像，它应该占据整个表格的30％，或者来自不同行的2个单元格（每个15％）（使用colspan =“2”）。然而，图像比我的小型计算机屏幕宽30％，这似乎占据了我设置的单元格宽度，即它将我的单元格拉伸到图像宽度而不是其他方式，这会抛弃设计的两列中的所有其他细胞（现在都比15％宽）。如果图像比我桌子的宽度大30％，我怎样才能让图像变得更小而不是表格单元更宽？

Answer 1

尝试下面的代码：

<table> 
<tr> 
<td style="height:30%; width:30%;" align="center"> 
<img style="display:block;" width="100%" height="100%" src="http://www.ursite.com/image.png" /> 
</td> 
<td style="height:20%; width:20%;" align="center"> 
<img style="display:block;" width="100%" height="100%" src="http://www.ursite.com/image.png" /> 
</td> 
<td style="height:20%; width:20%;" align="center"> 
<img style="display:block;" width="100%" height="100%" src="http://www.ursite.com/image.png" /> 
</td> 
</tr> 
</table> 

..... 这里是JSFIDDLE