css - 尽管大小相同，但某些图像在表格中出现扭曲(当为移动设备调整大小时)

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>

这是它当前显示方式的图像: image of mobile re-sized table

Answer 1

正在调整表格列的大小以适应它们最大的元素....在本例中是标题。您的标题长度决定了您的列宽，而列宽决定了您的图片大小。

默认情况下忽略 td 中的宽度:<TD> tag ignoring width in CSS