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

使图像适合表格单元格宽度百分比（HTML）

1 个答案: