2014-12-16 4 views
2

Я пытаюсь отправить html-письма с изображениями. Изображения выглядят хорошо во всех почтовых клиентах, но в Outlook они слишком широки. Как исправить максимальную ширину изображения?Ширина изображения слишком велика в Outlook

<table id="cg-cmgxsgg" class="widget widget-image " width="580" data-widget-code="email-image"> 
    <tbody> 
     <tr> 
     <td align="center"> 
      <div><img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" alt="" style="float: none; margin-left: auto; margin-right: auto;"></div> 
     </td> 
     </tr> 
    </tbody> 
</table> 
+0

[Это не поддерживается стиль CSS] (http://msdn.microsoft.com/en-us/library/ aa338201 (v = office.12) .aspx). Outlook известен тем, что обеспечивает очень ограниченную поддержку CSS. Лучшее решение - указать меньшую ширину (и высоту) в атрибутах HTML. – Blazemonger

+0

слишком широкий? можете ли вы быть более конкретным, может быть, показать некоторые снимки экрана? В настоящее время у вас он установлен на уровне 580, можете ли вы подтвердить, как широкий Outlook отображает изображение? – wf4

+0

Изображение, показанное слишком широко, означает, что ширина больше 580 пикселей. Похоже, что 1000px или больше – Radislav

ответ

0

max-width is not a supported CSS style in Outlook 2007. (Похоже, что и не float.) Outlook известен тем, что обеспечивает очень ограниченную поддержку CSS.

Ваше лучшее решение, чтобы указать меньшую ширину (и высоту) в HTML атрибуты:

<td align="center"> 
    <div><img src="..." width="500" height="300" alt="" style="margin-left: auto; margin-right: auto;"></div> 
</td> 
0

Пара вещей, я бы воздержаться от использования поплавков и т.д. в вашем коде Emailer, а также устранило бы, что обертка div, с почтовыми отправителями вы действительно должны пойти с простой табличной разметкой. Кроме того, старайтесь избегать вещей, как p тегов и т.д., поскольку они создают дополнительное пространство и т.д.

Для самого вопроса я бы попробовать что-то вроде этого, я бы установить высоту на мой образ и ивами это display:block

<table id="cg-cmgxsgg" class="widget widget-image" width="580" data-widget-code="email-image" cellpadding="0" cellspacing="0" border="0"> 
    <tbody> 
     <tr> 
     <td align="center"> 
      <img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" height="200" alt="" style="display:block;"> 
     </td> 
     </tr> 
    </tbody> 
</table> 
+0

Если я устанавливаю высоту, а мое изображение имеет ширину больше, чем высота, она выглядит уродливой. Он меняет пропорции – Radislav

6

Независимо от поддержки CSS или HTML-атрибутов основным фактором, вызывающим проблему в Outlook, является фактический размер изображения. Outlook обычно игнорирует любой размер HTML (width = или height =) или CSS-стиль (width :, height :) и отключается от встроенной информации в изображении. Все это основано на настройке DPI, а также на визуализации движка Word Word.

Mailchimp solutions

Ниже отрывок объясняя этот вопрос более подробно с here

«Эта проблема обычно происходит, когда вы используете изображение, кроме 96dpi.

При вставке изображения, Outlook будет масштабируйте изображение так, как если бы это было изображение в 96 точек на дюйм.Это означает, что если у вас есть изображение 150dpi с высотой 88 пикселей, оно будет отображаться как изображение с максимумом 56px; 88px/150dpi * 96dpi = 56px

Это еще хуже; при отправке Outlook будет конвертировать и сжимать (перерисовывать) изображения до 96 точек на дюйм с новыми измерениями навсегда! Это означает, что вся «подробная» информация о снимке будет потеряна, и вы отправите изображение с разрешением 96 точек на дюйм, которое имеет высоту 56 пикселей. Это, конечно, серьезная и очень заметная потеря качества.

Если ваше изображение меньше 96 точек на дюйм, тогда происходит обратное. Изображение с максимумом в 88 пикселей с разрешением на дюйм 32 приведет к тому, что изображение с разрешением 96 точек на дюйм высотой 264 пикселей. Таким образом, результат будет очень большим (но на этот раз вы можете изменить его размер без размытия изображения).

Это длинный выдающийся выбор вопрос/функция/дизайн, который восходит все пути к Word 6.0 с 1993 года»

1

Для установки макс ширину картинки для Outlook, добавить Width =„600“ приписывают IMG тег. Обратите внимание на отсутствие пикселей на таком размере, с рх он не работает, и она должна быть на IMG тега, а не какой-либо родительский элемент.

Eg

<img width="600" src="http://www.myimage.co.nz/myimage.jpg" alt="My Image" /> 

об одном но связанное примечание Я использую ширину 280 для бок о бок изображений в таблице ширины 600.Это связано с тем, что Outlook добавляет отступы (или, может быть, маржу), и они будут складываться, если вы сделали их как 300.

Смежные вопросы