html - Any way to set an image to anything but 100% of its native size in Outlook using CSS? -


i'm attempting develop email limited fluid resizing capability. know, bit of crap shoot, im giving try anyway because ive seen done. i'm stuck on 1 hangup- have 2 column email image features , text in each column. on mobile devices 2 columns stack on top of eachother. able insert image , have adapt fit parent, or @ least have outlook recognize when give class sets image @ defined width. right when render in outlook, image displayed 100% of native width , height, no matter css tricks try apply. love insight!

<style>     body {     max-width:600px;     margin:auto;     font-family: arial, sans-serif;     font-size: 12px; } img {     height:auto;     max-height:auto;     width:100%;     display:block } table {     max-width:600px!important;     border-spacing:0!important;     border:none; } td {     cellpadding:0px;     border-spacing:0px; } tr {     cellpadding:0px;     border-spacing:0px; } .headline {     padding:0px;     font-size:30px; } .paragraph {     font-size:16px;     line-height:100% } @media screen , (max-width: 520px) {     .containerbox {         width:520px!important;         max-width:520px!important;         margin:0 auto!important;         clear:both!important;     }     table {         width:100%;         display:block     }     .headline {         font-size:20px;     }     .paragraph {         font-size:14px;         line-height:100%     } } </style> <!--[if gte mso 9]> <style type="text/css">     .outlook {height:auto; width:290px; max-width:290px; display:block} </style> <![endif]-->   <body> <div style="background-color:#ffffff;"> <center> <!--[if !mso]><!--> <table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" style="     max-width:600px!important; width:100%;"><!--<![endif]--> <!--[if gte mso 9]><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600" ><![endif]-->    <tr>         <td> <!--[if !mso]><!--> <table align="left" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="48%" ><!--<![endif]--> <!--[if gte mso 9]><table align="left" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="290" ><![endif]--> <tr> <td class="outlook"><img class="outlook" src="shot.jpg" /></td> </tr> <tr> <td class="headline"> headline </td> </tr> <tr> <td class="paragraph"> copy here copy here copy here copy here copy here  </td> </tr> </table>  <!--[if !mso]><!--> <table align="right" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="48%"><!--<![endif]--> <!--[if gte mso 9]><table  align="right" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="290" ><![endif]--><tr> <td class="outlook"><img class="outlook" src="shot.jpg"/></td> </tr> <tr> <td class="headline"> headline </td> </tr> <tr> <td class="paragraph"> copy here copy here copy here copy here copy here  </td> </tr>  </table>         </td>      </tr> </table> </center></div> </body> 

you may find answer in word 2007 html , css rendering capabilities in outlook 2007 (part 1 of 2) article in msdn.

the issue appears use of named styles , class attribute. try code styles in-line @ each tag, seems work well.


Comments

Popular posts from this blog

ruby on rails - RuntimeError: Circular dependency detected while autoloading constant - ActiveAdmin.register Role -

c++ - OpenMP unpredictable overhead -

javascript - Wordpress slider, not displayed 100% width -