Elizaveta_Ozerova
@Elizaveta_Ozerova

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

Всем привет!

Первый раз верстаю страницу для 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>


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

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

Помогите, прошу!
  • Вопрос задан
  • 694 просмотра
Пригласить эксперта
Ответы на вопрос 2
@axeax
1) prntscr.com/db5ugi
2) зачем у картинки display: block?
3) на будущее для некоторых почтовиков лучше писать не margin: 0 а margin-top: 0; margin-left: 0; и т.д. То же самое с padding-ами и всеми свойствами которые могут иметь сразу несколько значений. Надо их перечислять отдельно.
Ответ написан
Комментировать
Elizaveta_Ozerova
@Elizaveta_Ozerova Автор вопроса
1) поставила пропущенную высоту ячейке с инстаграмом - ничего не изменилось : (
2) display: block; — хак для Outlook, если не ставить display: block, то Outlook добавит к картинке отступы (прочитала на хабре)
3) спасибо за совет
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы