Некоторые изображения выглядят искаженными в таблице (при изменении размера для мобильных устройств), несмотря на то, что они имеют одинаковый размер

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

Размер столбцов таблицы изменяется в соответствии с их самым большим элементом .... в данном случае это заголовки. Длина вашего заголовка определяет ширину столбца, который определяет размер вашего изображения.

Ширина в тд по умолчанию игнорируется: тег игнорирует ширину в CSS