Отзывчивое изображение электронной почты

Question

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

<style type="text/css"> 
@media only screen and (max-width: 480px){ 
    .emailImage { 
     height:auto !important; 
     max-width:600px !important; 
     width: 100% !important; 
    } 
} 
</style> 

Для фотографий, которые я хотел быть отзывчивыми я добавил класс =»emailImage ». К сожалению, сейчас это не работает. Кто-нибудь может объяснить, почему или дать лучшее решение для моей проблемы? При необходимости здесь полный код из моей рассылки: http://pastebin.de/39651?

Благодаря

Answer 1

сообщения электронной почты как HTML не поддерживает CSS (по крайней мере, не все почтовые клиенты поддерживают эту функцию еще). Вам придется использовать материал старой школы HTML, такой как <img src="some-URL.png" width="100" height="200">

Кстати, вы также можете попробовать использовать встроенный атрибут style в самом теге HTML. Он может работать для некоторых почтовых клиентов.

Check out this post for "best-practices" with emails and HTMLs

Answer 2

Попробуйте это:

<style type="text/css"> 
@media screen and (max-width: 480px){ 
    img[class="emailImage"] { 
     width: 100% !important; 
    } 
} 
</style> 

<img class="emailImage" src="path/to/img" style="width: 600px; height:auto;" width="600"> 

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

UPDATE: с использованием атрибутов селекторов внутри запросов СМИ является обходным путем для Yahoo mail bug, которая отдает приоритет стили внутри медиа-запросов более инлайны из них.

Поддержка максимальной ширины в почтовых клиентах - pretty limited, поэтому более безопасный способ - просто указать ширину изображения, как встроенный стиль (который получает сбой в MQ с использованием !important). Поскольку высота всегда авто, ее можно просто определить в строке. Глобальные атрибуты используются как окончательный резерв только в том случае, если некоторые почтовые клиенты решают игнорировать или стирать встроенный стиль.

Кроме того, в (kinda) комплексных почтовых макетах, в которых элемент изображения, вероятно, будет находиться внутри какой-либо таблицы, в этом случае элемент таблицы должен иметь одинаковый набор свойств внутри и внутри медиа-запросов, чтобы он был отзывчивым.

Полезная ссылка: CSS support across mail clients

Answer 3

Большинство почтовых клиентов имеют ужасную поддержку CSS. Большинство клиентов разделяют ваш шаблон электронной почты, поэтому вы не должны включать в себя важный CSS. Также может быть тот факт, что некоторые клиенты разделяют имена классов по электронной почте или переформатируют их или отказываются понимать медиа-запросы или множество других возможных проблем.

Решение состоит в том, чтобы просто написать все CSS-строки для каждого элемента. Регулярных max-width: 100% и height: auto должно быть достаточно.

Есть инструменты, которые преобразуют внешний набор стилей и имен классов в встроенные стили. Это мешает вам использовать медиа-запросы, поэтому убедитесь, что вы не зависите от них, чтобы отображать электронную почту.

Редактировать: Поскольку вы, кажется, используете Mailchimp, посмотрите на their article on CSS in HTML emails.