Аватар с закругленными углами в фоновом изображении VML для Outlook - PullRequest
Новая
       61

Аватар с закругленными углами в фоновом изображении VML для Outlook

1 голос
/ 18 июня 2020

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

В настоящее время я использую это код. Использование av: fill для применения фонового изображения и av: rect для применения радиуса границы. Однако я не добился успеха.

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

Помощь очень признательна! 

<table>
    <td background="https://picsum.photos/32" width="32" height="32" valign="top" style="border-radius: 50%">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" arcsize="50%" stroke="false" style="width:32px;height:32px;">
        <v:fill type="tile" src="https://picsum.photos/32" arcsize="50%" color="#7bceeb" />
      </v:rect>
      <![endif]-->
    </td>
</table>

1 Ответ

0 голосов
/ 25 июня 2020

Я обнаружил, что решение работает хорошо. Использование <v:oval> для придания формы и <v:fill> для придания изображения.

Хотя я обнаружил, что мне нужно установить обводку овала на false, похоже, по умолчанию он включен. 

<td width="32" style="margin: 0; padding: 0;">
   <!--[if (gte mso 9)|(IE)]>
      <v:oval xmlns:v="urn:schemas-microsoft-com:vml" fill="true" style='width:32px;height:32px' stroke="false">
         <v:fill type="tile" src="[URL]" />
      </v:oval>
   <![endif]-->
   <!--[if !mso]>-->
      <img style="border-radius: 16px;" width="32" height="32" src="[URL]" />
   <!--<![endif]-->
</td>

Затем, используя условные операторы, я могу предоставить форму VML в Outlook и обычный элемент <img> всем остальным, который поддерживает радиус границы.

(По сути, все, кроме outlook согласно caniemail.com )

...