Почему при верстке письма изображения растягиваются при затесте на мобильную версию?

Question

[Ella Fitzgerald]

Всем привет!

Первый раз верстаю страницу для email-расслылки. Помогите, пожалуйста, разобраться, почему на десктопной и планшетной версии картинки при верстке письма смотрятся нормально, а на мобильной - растягиваются? У меня же стоят фиксированные ширина и высота (специально указала их практически в каждом теге на всякий случай). По идее всё должно оставаться с указанными размерами, просто с полосой прокрутки в браузере.

Вот код:

<table width="600" height="32" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin: 0; padding: 0; height: 32px; text-align: center; font-size: 0;">
   <tr>
       <td width="24" height="32" align="center" valign="middle" style="margin: 0; padding: 0; background-color: #c94024;">
            <div style="height: 32px; margin: 0; background-color: #c94024;"></div>
       </td>

       <td width="144" height="32" align="center" valign="middle" style="margin: 0; padding: 0;background-color: #e5e5e5;">
           <a href="#" target="_blank" style="width: 144px; line-height: 32px; height: 32px; background-color: #e5e5e5; cursor: pointer; text-decoration: none;">
               <img src="..." alt="linkedIn" border="0" width="19" height="16" style="display:block;">
           </a>
       </td>

       <td width="144" height="32" align="center" valign="middle" style="margin: 0; padding: 0;background-color: #cccccc;">
           <a href="#" target="_blank" style="width: 144px; line-height: 32px; height: 32px; background-color: #cccccc; cursor: pointer; text-decoration: none;">
              <img src="..." alt="facebook" border="0" width="9" height="16" style="display:block;">
           </a>
       </td>

       <td width="144" height="32" align="center" valign="middle" style="margin: 0; padding: 0;background-color: #b5b5b5;">
          <a href="#" target="_blank" style="width: 144px; line-height: 32px; height: 32px; background-color: #b5b5b5; cursor: pointer; text-decoration: none;">
               <img src="..." alt="twitter" border="0" width="19" height="13" style="display:block;">
          </a>
        </td>

        <td width="144" align="center" valign="middle" style="margin: 0; padding: 0;background-color: #939393;">
           <a href="#" target="_blank" style="width: 144px; line-height: 32px; height: 32px; background-color: #939393; cursor: pointer; text-decoration: none;">
               <img src="..." alt="instagram" border="0" width="16" height="16" style="display:block;">
           </a>
        </td>

   </tr>
</table>

Как должно быть:


Как выглядит на мобильной версии:


Помогите, прошу!

Answer 1

[axeax]

1) prntscr.com/db5ugi
2) зачем у картинки display: block?
3) на будущее для некоторых почтовиков лучше писать не margin: 0 а margin-top: 0; margin-left: 0; и т.д. То же самое с padding-ами и всеми свойствами которые могут иметь сразу несколько значений. Надо их перечислять отдельно.

Answer 2

[Ella Fitzgerald]

1) поставила пропущенную высоту ячейке с инстаграмом - ничего не изменилось : (
2) display: block; — хак для Outlook, если не ставить display: block, то Outlook добавит к картинке отступы (прочитала на хабре)
3) спасибо за совет