95

我在作为电子邮件发送的 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中出现模糊。我不确定当我成功修复高度和宽度的样式时它是否会持续存在。那么我该如何解决这个问题

4

10 回答 10

181

将宽度和高度放在单独的属性中，没有单位：

<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]-->
于 2014-01-08T08:05:21.143 回答
20

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

于 2015-02-03T14:11:02.463 回答
16

这对我有用：

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

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

于 2014-09-09T11:44:49.537 回答
13

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

<img src="image.png" style="height: 55px;width:139px;border:0;" height="55" width="139">
于 2016-05-07T13:01:12.043 回答
9

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

黑客修复：

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

我使用的 hack 设置 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)。

它不漂亮，但它有效。

于 2016-11-18T09:45:52.533 回答
6 

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

这在gmail和outlook中都对我有用。

于 2015-08-10T14:16:36.287 回答
2

这在 Outlook 中对我有用：

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

我希望这个对你有用。

于 2017-09-15T13:44:16.450 回答
1

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

于 2017-01-17T07:15:48.437 回答
0

使图像精确到电子邮件中所需的大小。Windows MSO 在不同情况下很难调整图像大小。

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

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

于 2020-10-21T18:02:22.890 回答
0

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

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

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

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

解决方案是添加norescale="norescale"到 img 标签。

于 2021-08-25T09:48:12.610 回答