问题
I organized my website content in a HTML table, and I've set specific widths for every cell (in percentages). Now I have a rather large image in a combined cell that is supposed to span 30% of the whole table, or 2 cells (of 15% each) from a different row (using colspan="2"). The image, however, is wider than 30% of my small computer screen, and that seems to dominate over my set cell width, i.e. it stretches my cell to the width of my image rather than the other way around, which throws off the design of all other cells in both columns (which are wider than 15% now). How do I get it to make the image smaller rather than the table cell wider if the image is wider than 30% of my table?
回答1:
Try following code :
<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>
..... Here Is JSFIDDLE
来源：https://stackoverflow.com/questions/24860020/fit-image-to-table-cell-width-percentage-html