HTML Outlook игнорирует ширину td по изображению - PullRequest
Новая
       46

HTML Outlook игнорирует ширину td по изображению

0 голосов
/ 22 марта 2019

Мне известно, что этот тип вопросов задавался ранее, но решения, которые там даны, не дают мне решения.

Я хочу, чтобы <td> имел ширину 70%, но вставленное изображение увеличивает ширину получаемых писем в Outlook (я использую MS Outlook Pro 2013). Я не хочу использовать unit px, потому что это не работает, чтобы охватить все ширины экрана. Решением может быть использование <div> вместо <td>, но мне сказали, что <div> не везде поддерживается правильно. Пожалуйста, сообщите.

HTML 

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="background-color: #fee7f3; color: #ffffff; border-radius: 3px 3px 0 0;">
    <tbody>
        <tr>
            <td style="width: 70%;"><img src="/example.jpg" style="width: auto; height: auto; float: left; box-sizing: border-box;"></td>
            <td style="width: 30%;"><h1>Example txt</h1></td>
        </tr>
    </tbody>
</table>

Мои попытки

  1. Я обернул <img> тегом <p>
  2. Я добавил display: inline-block для <td>
  3. Я добавил атрибуты width и height для <td> и <img>
  4. Я добавил width: 100% и height: auto для <img>

1 Ответ

0 голосов
/ 24 марта 2019

Хорошей новостью является то, что Outlook не поддерживает @media запросов, поэтому вы можете переопределить любые установленные значения, которые вам нужно использовать в электронной почте.

Outlook имеет тенденцию игнорировать встроенные стили для ширины изображения. Предполагая, что вам требуется электронная почта шириной 600 пикселей, а изображение размером 400 пикселей, укажите ширину кода следующим образом: 

<img src="example.jpg" width="400" style="width: 70%; height: auto;" />

Некоторые другие вещи, о которых вы должны знать, это то, что размер ящика не работает в большинстве почтовых клиентов. border-radius не работает с Outlook.

Удачи.

...