Outlook 邮件中未采用图像样式的高度和宽度答案

【问题标题】：Image style height and width not taken in outlook mailsOutlook 邮件中未采用图像样式的高度和宽度
【发布时间】：2014-01-08 07:56:55
【问题描述】：

我在作为电子邮件发送的 html 内容中有以下 dom 结构。

<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 live mail 中的图像显得模糊。我不确定当我成功修复高度和宽度的样式时它是否会持续存在。那么我该如何解决这个问题

【问题讨论】：

标签： html css outlook windows-live-mail

【解决方案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]-->

【讨论】：

不要在宽度或高度 img 属性中包含“px” - 它们仅在 CSS 中使用。
@CalvT：是的。使用无像素解决了问题。
您应该删除第一个“诱人的答案”以避免混淆。 HTML 属性没有单位。
只设置宽度就足够了；高度会自动调整。
不能正确解析'style'标签确实是Outlook的一个缺陷。

【解决方案2】：

出于某种奇怪的原因，需要保留 px。

【讨论】：

不知道为什么这被否决了这么多，为我修复了 Outlook 2010 上的图像大小问题...
您能详细说明一下这个答案吗？这会对非前景读者产生负面影响吗？

【解决方案3】：

这对我有用：

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

到目前为止没有其他任何工作。

【讨论】：

【解决方案4】：

可以确认将 px 从宽度和高度中排除在外对 Outlook 有用

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

【讨论】：

【解决方案5】：

我有幸根据共享点数据为 Outlook 2010 创建了一封电子邮件。但是在创建 Outlook 电子邮件时，Outlook 的智慧会将图像的宽度和高度降低到厘米。有趣的是，在转发电子邮件时正确使用宽度和高度，但在打开电子邮件时却没有。

黑客修复：

我有一张图像 [720px X 150px]，应该是 [19.05cm X 3.98cm]。但是前景将图像宽度和高度设置为 [15.24cm X 3.18cm]。 显然这是个问题。

我使用的技巧是设置 html 图像标签如下：

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

为什么是宽度和高度？

嗯，它是比率（增加 25%）之间

前景在说什么和
应该是什么 增加当前大小的 25%；即(720 X 1.25 = 900) 和(150 X 1.25 = 187.5)。

它不漂亮，但它有效。

【讨论】：

谢谢，我花了 2 天时间解决这个问题，您的解决方案对我有用。

【解决方案6】：

&lt;img id="_x0000_i1026" src="images/img.jpg" width="120" height="150" /&gt;

这对我在 gmail 和 Outlook 中都有效。

【讨论】：

【解决方案7】：

这在 Outlook 中适用于我：

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

我希望它对你有用。

【讨论】：

【解决方案8】：

我对在 Outlook 中无法正确显示的图像有同样的问题。我正在使用 px 和 % 为图像应用高度和宽度。但是当我删除 px 和 % 并且只使用 html 中的任何值时，它对我有用。例如，我使用的是 : width="800px" 现在我使用的是 widht="800" 并且问题已为我解决。

【讨论】：

【解决方案9】：

使图像与电子邮件中所需的精确尺寸一致。 Windows MSO 在不同场景下很难调整图像大小。

在使用 1px x 1px 透明 png 或 gif 作为分隔符的情况下，通过宽度、高度或样式属性定义尺寸将在大多数客户端中正常工作，但在 windows MSO 中则不行（当然）。

示例用例 - 您正在使用背景图像，并且需要在背景图像的某些部分上放置带有链接的 a。使用 1px x 1px 间隔 gif/png 只会扩展这么宽（大约 30px）。您需要将垫片调整到准确的尺寸。

【讨论】：

【解决方案10】：

这可能是由邮件客户端的样式表引起的。

例如，foxmail邮件客户端会添加以下样式：

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

因此，任何没有norescale 属性的图像都将具有高度自动样式。

解决方法是将norescale="norescale"添加到img标签中。

【讨论】：