适合图像表格单元格的宽度百分比(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