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

Post a Comment

Popular posts from this blog

c++ - OpenMP unpredictable overhead -

-
i have simple openmp code runs 4 empty threads , reports time: #include "omp.h" #include <sys/time.h> #include <cstdio> double start_time; void process_thread() { } int main(){ struct timeval tv; gettimeofday(&tv, null); start_time = 1000*((double)tv.tv_sec + 1e-6*(double)tv.tv_usec); printf("beginning time: %.3fms ",start_time-start_time); #pragma omp parallel schedule(static,1) for(int i=0;i<4;i++) process_thread(); gettimeofday(&tv, null); double cur_time = 1000*((double)tv.tv_sec + 1e-6*(double)tv.tv_usec); printf("finishing time: %.3fms\n\n",cur_time-start_time); } without openmp running time small , consistent: beginning time: 0.000ms finishing time: 0.050ms beginning time: 0.000ms finishing time: 0.050ms beginning time: 0.000ms finishing time: 0.049ms beginning time: 0.000ms finishing time: 0.049ms beginning time: 0.000ms finishing time: 0.050ms beginnin...
Read more

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

-
i using activeadmin , have file doing this: activeadmin.register role something--- end however, server gives me error: runtimeerror: circular dependency detected while autoloading constant role /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:461:in `load_missing_constant' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:184:in `const_missing' ~/desktop/boxfox/app/admin/role.rb:1:in `<top (required)>' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:424:in `load' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:424:in `block in load_file' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:616:in `new_constants_in' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:423:in `load_file' /library/ruby/gems/2.0.0/gems/activesuppor...
Read more

javascript - Wordpress slider, not displayed 100% width -

-
so im making first wordpress theme scratch going fine got problem. want slider on homepage 1 thing wrong. im setting width of image 100% !important doesnt go 100% width. makes image wider not 100%. example here: http://bit.ly/11ouebg see image doesnt contain whole width. can see background-color. really weird, im using meteor slides. i hope can me out :d
Read more