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 · Accepted Answer

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]-->

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   lt img src  quot      quot  style  quot width 720px  heigh 150px quot  width  quot 900 quot  height  quot 187 5 quot    gt   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

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

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

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

[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