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

【问题标题】：Fit image to table cell width percentage (HTML)使图像适合表格单元格宽度百分比 (HTML)
【发布时间】：2014-09-11 15:48:30
【问题描述】：

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

【问题讨论】：

能提供html代码/jsfiddle吗？

标签： html html-table width cell

【解决方案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

【讨论】：