图像样式的高度和宽度不采取在展望邮件

我有一个下面的结构的 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)图像在 窗口实时邮件中出现模糊。我不知道是否会坚持在展望时,我会成功地固定风格的高度和宽度。所以我该怎么补救

153278 次浏览

Put the width and height in separate attributes, with no unit:

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

Another Option:

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

This worked for me:

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

Nothing else has worked so far.

The px needs to be left off, for some odd reason.

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

This worked for me both in gmail and outlook.

Can confirm that leaving px out from width and height did the trick for Outlook

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

I had the pleasure of creating an email for outlook 2010 based on sharepoint data. But when creating an outlook email, outlook in its wisdom reduces the image width and height to cm. Interestingly using the width and height kicks in correctly when you forward the email but not when you open it.

Hack Fix:

I had an image [720px X 150px] which should be [19.05cm X 3.98cm]. BUT outlook set the image width and height to [15.24cm X 3.18cm]. Clearly this is a problem.

The hack I used was setting the html image tag as follows:

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

Why that width and height?

Well it is the ratio (25% increase) between

  • what outlook was saying and
  • what it should be by adding 25% of the current size; which is (720 X 1.25 = 900) and (150 X 1.25 = 187.5).

Its not pretty but it works.

I have same problem for image which is not showing correctly in outlook.and I am using px and % for applying height and width for image. but when i removed px and % and using only just whatever the value in html it is worked for me. For example i was using : width="800px" now I'm using widht="800" and problem is resolved for me.

This works for me in Outlook:

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

I hope it works for you.

make the image the exact size needed in the email. Windows MSO has a hard time resizing images in different scenarios.

in the case of using a 1px by 1px transparent png or gif as a spacer, defining the dimensions via width, height, or style attributes will work as expected in the majority of clients, but not windows MSO (of course).

example use case - you are using a background image and need to position a with a link inside over some part of the background image. Using a 1px by 1px spacer gif/png will only expand so wide (about 30px). You need size the spacer to the exact dimensions.

This maybe caused by the mail client's stylesheet.

For example, the foxmail mail client will add the following styles:

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

So any image without the norescale attribute will have height auto style.

The solution is add norescale="norescale" to the img tag.