Как лучше сверстать этот блок в email письме?

Question

[deantek]

градиентный круг и наушники - разные картинки, как вставить товар в этот кружок, чтобы он более менее сносно выглядел в почтовиках(в приоритете mail, yandex, gmail)?

как я понял, то абсолютное позиционирование в письмах не работает


Может кто-то уже верстал подобные блоки, можете скинуть пример или что почитать, пожалуйста?

Comments

[Одиночка Айс]

изображение с градиентом в качестве бэкграунда, товар внутри картинкой

Answer 1

[deantek]

проблему решил тем, что картинку товара прописал через background: no-repeat center/40% url("cdn.mcauto-images-production.sendgrid.net/f091887f...");

на gmail, yandex и mail вроде работает нормально(десктоп и приложения), насчет других почтовиков не уверен

Answer 2

[Артур Кох]

У тебя относительно и3ящное решение, но на некоторых почтовых клиентах может не сработать. От 40% тоже лучше и3бавиться.

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