Gmail удаляет размер фона в моем информационном бюллетене

У меня есть информационный бюллетень по электронной почте, содержащий фотографии продуктов, которые распространяются через информационный бюллетень. Я использую полноразмерные фотографии и изменяю их размер:

<table cellspacing="0" cellpadding="0" border="0" style="width: 201px; height: 240px; background-image: url({{ item1.picture }}); background-repeat: no-repeat; background-size: 100% auto;">

Gmail разделяет

background-size: 100% auto;

и изображения отображаются в полном размере. Есть ли способ исправить это? Я не хочу изменять размер каждой картинки на стороне сервера.

Ответ 1

Я работал над этим, используя метод сокращенного кода css. Определите изображение, повторите и размер в одной строке следующим образом:

background: url({{ item1.picture }}) no-repeat top / 100% auto;

Обратите внимание, что атрибут size должен быть определен после атрибута position ('top') и ограничен с помощью '/'.

Ответ 2

Ваша техника не будет работать в Outlook. Я знаю, что это не вопрос, но это самый популярный email-адрес. Я предлагаю перейти с комбинацией VML/background, как показано в backgrounds.cm.

Я не уверен, что вы получите 100% -ное изменение размера фонового изображения, работающего в html-письме. Я видел только черепичные или не черепичные реализации. Есть ли причина, по которой вы не можете просто использовать обычный тег изображения? Что-то вроде этого хорошо работает с перекрестным клиентом:

<td>
  <img alt="" src="" width="100%" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>

Ответ 3

Я создал внутри электронной почты кнопку с логотипом twitter:

Итак, я использовал background-image, чтобы добавить логотип Twitter и background-size, чтобы отобразить размер сетчатки изображения.

Я пробовал полную версию свойств CSS background-*, а также сокращенную версию background: url() no-repeat 16px center / 24px auto, Gmail все еще прерывал ее.

Итак, мое решение заключается в использовании тега img HTML вместо свойства background. И он работает лучше, поскольку тег img более широко поддерживается среди почтовых клиентов.

<a href="#" style="background-color: #55acee; display: inline-block; padding: 12px 24px;  color: #ffffff;  font-family: sans-serif; font-size: 16px; font-weight: bold; line-height: 24px; text-align: center; text-decoration: none; min-width: 200px; border-radius: 2px; border-bottom-color: #188acf; border-bottom-width: 3px; border-bottom-style: solid;">
  <!-- logo image should be 48x48px -->
  <img src="[email protected]" width="24" height="24" style="vertical-align: bottom; padding-right: 10px;"> 
  Share the good news on Twitter
</a>