尽管大小相同，但某些图像在表中显示失真(为移动设备重新调整大小时)

Question

我目前正在处理的一个表遇到了一些巨大的麻烦/混乱，从逻辑上讲，我觉得所有的东西都应该均匀地显示在它们的表元素中，因为所有的表行/列都应该有均匀的间距，所有的图像都是完全相同的大小，但有些图像看起来失真了，我不知道是什么原因造成的。

以下是当前表格的来源：

<table style="width:100%;">
<tbody>
<tr>
<td align="left" style="width: 10%;" valign="middle"><font style="font-size:1vw;">Title of Program &amp; Status</font></td>
<td align="center" style="width: 10%;" valign="middle"><font style="font-size:1vw;">Emerging Leaders</font></td>
<td align="center" style="width: 10%;" valign="middle"><font style="font-size:1vw;">Middle Leaders</font></td>
<td align="center" style="width: 10%;" valign="middle"><font style="font-size:1vw;">Established Leaders</font></td>
<td align="center" style="width: 10%;" valign="middle"><font style="font-size:1vw;">Aspirant Leaders</font></td>
<td align="center" style="width: 10%;" valign="middle"><font style="font-size:1vw;">Initial Leaders</font></td>
<td align="center" style="width: 10%;" valign="middle"><font style="font-size:1vw;">Experienced Leaders</font></td>
<td align="center" style="width: 10%;" valign="middle"><font style="font-size:1vw;">Mentor Principals</font></td>
</tr>
<tr>
<td align="left" style="width: 10%;" valign="middle">
<p style="font-size:1vw;">Leadership Masterclass</p>
<p style="font-size:1vw;">A program to introduce a growth coaching approach to conversational contexts in schools.</p>
</td>
<td align="center" style="width: 10%;" valign="middle"><img alt="" src="/getmedia/a185933e-7199-497a-912e-a424060c8b39/button_orange.aspx?" width="35vw" height="35vh" /></td>
<td align="center" style="width: 10%;" valign="middle"><img alt="" src="/getmedia/6e2316cc-1e14-46f9-8f28-a821bf3eea46/Button_pink.aspx?" width="35vw" height="35vh" /></td>
<td align="center" style="width: 10%;" valign="middle"><img alt="" src="/getmedia/969ab310-1d1b-4cf7-9643-e83f78f70aeb/button_purple.aspx?" width="35vw" height="35vh" /></td>
<td align="center" style="width: 10%;" valign="middle"><img alt="" src="/getmedia/59634623-1879-4dc1-b056-01b98e067a64/button_green.aspx?" width="35vw" height="35vh" /></td>
<td align="center" style="width: 10%;" valign="middle"><img alt="" src="/getmedia/32abc54e-c1da-4f89-acbc-6ac3c9b800aa/button_red.aspx?" width="35vw" height="35vh" /></td>
<td align="center" style="width: 10%;" valign="middle"><img alt="" src="/getmedia/0ed3d516-d829-46f0-abb0-2af57b07b298/button_yellow.aspx?" width="35vw" height="35vh" /></td>
<td align="center" style="width: 10%;" valign="middle"><img alt="" src="/getmedia/4ec07bbf-aee6-4626-9c75-8fed16f90a00/button_blue.aspx?" width="35vw" height="35vh" /></td>
</tr>
</tbody>

下面是它目前的显示方式：移动重新调整大小的桌子的图像

Answer 1

正在调整表列的大小以适应其最大元素。。。。在这种情况下就是标题。你的标题长度决定了你的列宽，也决定了你图像的大小。

默认情况下忽略td中的宽度：<TD>CSS 中标签忽略宽度