使圖像適合表格單元格寬度百分比（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