Image style height and width not taken in outlook mails

Question

I have a following dom structure in html content I am sending as email    lt a href  http   content mindmatrix net email 814xjqjmpj5r b59tqx7tzz2x7   target   new  gt   lt span style  text-decoration none text-underline none  gt   lt img border 0 id   x005Fi1026   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  gt   lt  span gt  lt  a gt    I am giving style height 150px width 120px to image for making it of size thumbnail  Actual height and width of this image is very large  Problem is  this style is not taken when mail goes in outlook inbox  So my questions are -  1 How can i make the css work for setting height and width   2  Image appears blur in Windown live mail  I am not sure whether it will persist in outlook when i will succeed in fixing style of height and width  so how can i fix this

User · Answer

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.

User · Answer

This worked for me   src   0    width 30 height 30 style  border 0     Nothing else has worked so far

User · Answer

x000D   x000D   lt img id   x005Fi1026  src  images img jpg  width  120  height  150    gt  x000D   x000D   x000D    This worked for me both in gmail and outlook

User · Answer

Can confirm that leaving px out from width and height did the trick for Outlook   lt img src  image png  style  height  55px width 139px border 0   height  55  width  139  gt

User · Answer

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

User · Answer

Put the width and height in separate attributes  with no unit    lt img style  margin  0  border  0  padding  0  display  block   src  images img jpg  width  120  height  150  gt    Another Option    lt  -- if gte mso 9  gt   lt style type  text css  gt  img header   width  600px       or something like that     lt  style gt   lt   endif -- gt

User · Answer

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

User · Answer

The px needs to be left off  for some odd reason

User · Answer

This works for me in Outlook    lt img src  image jpg  width  120  style  display block width 100     gt   I hope it works for you

[html] Image style height and width not taken in outlook mails

Examples related to html

Examples related to css

Examples related to outlook

Examples related to windows-live-mail