使图像适合表格单元格宽度百分比 (HTML)

我在 HTML 表格中组织了网站内容，并为每个单元格设置了特定宽度（以百分比表示）。现在，我在组合单元格中有一个相当大的图像，该图像应该跨越整个表格的 30%，或者来自不同行的 2 个单元格（每个单元格 15%）（使用 colspan="2"）。然而，该图像比我的小计算机屏幕的 30% 宽，这似乎主导了我设置的单元格宽度，即它将我的单元格拉伸到图像的宽度，而不是相反，这破坏了设计两列中所有其他单元格的宽度（现在宽度超过 15%）。如果图像比表格的 30% 宽，如何使图像变小而不是表格单元格变宽？

尝试以下代码：

<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 http://jsfiddle.net/vaidyamanishjoshi/4S6gR/