使图像适合表格单元格宽度百分比（HTML） [英] Fit image to table cell width percentage (HTML)

问题描述

我在HTML表格中整理了网站内容，并为每个单元格设置了特定的宽度（以百分比为单位）。现在，我在一个组合单元格中有一个相当大的图像，该图像应该跨整个表的30％，或者是来自不同行的2个单元格（每个单元格的15％）（使用colspan = 2）。但是，图像的宽度大于我的小型计算机屏幕的30％，这似乎在我设置的单元格宽度上占主导地位，即它将单元格拉伸到图像的宽度，而不是反过来，这使设计失败两列中所有其他单元格的数量（目前已超过15％）。如果图像大于表的30％，如何使图像变小而不是使表格单元格变宽？

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?

推荐答案

尝试以下代码：

<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

..... Here Is JSFIDDLE

这篇关于使图像适合表格单元格宽度百分比（HTML）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！