Высота и ширина стиля изображения не принимаются в почтовых сообщениях Outlook.

Question

У меня есть следующая структура DOM в HTML-контент, который я отправляю по электронной почте.

<a href="http://content.mindmatrix.net/email/814xjqjmpj5r/b59tqx7tzz2x7"
 target="_new">
<span style='text-decoration:none;text-underline:none'>
<img border=0 id="_x0000_i1026"
 src="http://dev.mindmatrix.net/page/e7c9cf53-bae8-4024-a561-355f950cb26b/635246986810000000/original.jpeg?userid=cozmwz91irkm1"
 style='border-bottom-color:black;border-bottom-style:solid;border-bottom-width:
 1px;border-left-color:black;border-left-style:solid;border-left-width:1px;
 border-right-color:black;border-right-style:solid;border-right-width:1px;
 border-top-color:black;border-top-style:solid;border-top-width:1px;
 height:150px;width:120px'>
</span></a>

Я даю стиль height:150px;width:120px чтобы сделать изображение размером с миниатюру. Фактическая высота и ширина этого изображения очень велики. Проблема в том, что этот стиль не используется, когда почта отправляется в почтовый ящик Outlook. Так что мои вопросы -

1) Как я могу заставить css работать для установки высоты и ширины.

2) Изображение появляется размытым в Windown живой почте. Я не уверен, сохранится ли это в перспективе, когда мне удастся установить стиль высоты и ширины. так как я могу это исправить

Answer 1

Укажите ширину и высоту в отдельных атрибутах без единицы измерения:

<img style="margin: 0; border: 0; padding: 0; display: block;"
src="images/img.jpg" width="120" height="150">

Другой вариант:

<!--[if gte mso 9]>
<style type="text/css">
img.header { width: 600px; } /* or something like that */
</style>
<![endif]-->

Answer 2

По какой-то непонятной причине px должен быть отключен.

Answer 3

Это сработало для меня:

src="{0}"  width=30 height=30 style="border:0;"

Ничто другое не сработало до сих пор.

Answer 4

Можно подтвердить, что удаление px из ширины и высоты помогло Outlook

<img src="image.png" style="height: 55px;width:139px;border:0;" height="55" width="139">

Answer 5

Я имел удовольствие создать электронное письмо для Outlook 2010 на основе данных sharepoint. Но при создании электронной почты Outlook, Outlook в своей мудрости уменьшает ширину и высоту imga до см. интересно, что ширина и высота корректно отображаются при пересылке письма, а не при его открытии.

взломать исправить.

у меня было изображение 720px X150px, которое должно быть 19.05cm x 3.98cm . НО внешний вид установите ширину и высоту изображения (15,24 см х 3,18 см). * ясно, что это проблема.

взлом, который я использовал, устанавливал HTML-тег изображения следующим образом

<img src="...." style="width:720px;heigh:150px" width="900" height="187.5" />

почему эта ширина и высота; Ну, это соотношение (увеличение на 25%) между тем, что говорят перспективы, и тем, что должно быть (720 X 25% = 900). Это не красиво, но это работает.

Answer 6

<img id="_x0000_i1026" src="images/img.jpg" width="120" height="150" />

Это работало для меня как в Gmail, так и в Outlook.

Answer 7

Это работает для меня в Outlook:

<img src="image.jpg" width="120" style="display:block;width:100%" />

Я надеюсь, что это работает для вас.

Answer 8

У меня та же проблема с изображением, которое не отображается правильно в outlook.и я использую px и% для применения высоты и ширины для изображения. но когда я удалил px и% и использовал только любое значение в html, это сработало для меня. Например, я использовал: width="800px", теперь я использую widht="800", и проблема решена для меня.

Answer 9

Сделайте изображение точного размера, необходимого для письма. Windows MSO испытывает трудности с изменением размера изображений в различных сценариях.

в случае использования прозрачного png или gif размером 1 на 1 пиксель в качестве разделителя определение размеров с помощью атрибутов ширины, высоты или стиля будет работать должным образом в большинстве клиентов, но не в Windows MSO (конечно).

Пример использования - вы используете фоновое изображение и вам нужно разместить объект со ссылкой внутри над некоторой частью фонового изображения. Использование разделителя размером 1 на 1 пиксель gif/png расширится только до такой ширины (около 30 пикселей). Вам необходимо подобрать проставку по точным размерам.

Answer 10

Это может быть вызвано таблицей стилей почтового клиента.

Например, почтовый клиент foxmail добавит следующие стили:

      .mail_content * > img:not([norescale]) {
    max-width: 100%;
    height:auto !important
}

Так что любое изображение без norescale Атрибут будет иметь автоматический стиль высоты.

Решение добавить norescale="norescale" в тег img.

Answer 11

Это решение работает для меня. Обратите внимание на атрибуты, у которых в конце нет PX. Также пустые места: