У меня есть информационный бюллетень по электронной почте, содержащий фотографии продуктов, которые распространяются через информационный бюллетень. Я использую полноразмерные фотографии и изменяю их размер:
<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;
и изображения отображаются в полном размере. Есть ли способ исправить это? Я не хочу изменять размер каждой картинки на стороне сервера.
Я работал над этим, используя метод сокращенного кода css. Определите изображение, повторите и размер в одной строке следующим образом:
background: url({{ item1.picture }}) no-repeat top / 100% auto;
Обратите внимание, что атрибут size должен быть определен после атрибута position ('top') и ограничен с помощью '/'.
Ваша техника не будет работать в 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>
Я создал внутри электронной почты кнопку с логотипом 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>