Hi folks,
I have a responsive email where I have multiple images on a table row, each in a separate TD. For whatever reason the mobile email clients are misscalculating the height of the images and there are gaps in the tests on smartphones. I tried to avoid width with decimals on the table columns but the tests are not looking any better.

You can see if you test the code bellow, some tiny white lines (gaps) at the top/bottom of some images. It looks like the email clients on mobile devices cannot calculate properly the size of those fluid images... I tested on iPhone as well as on Adroid and Blackberry. They all have similar gaps.

What do you do when you have multiple images on the same row and they have to be fluid on mobile (keep the ratio)?

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta content="initial-scale=1.0" name="viewport" />
      <title>Untitled Document</title>
      <style type="text/css">
         #outlook a {padding:0;}
         body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;-webkit-font-smoothing: antialiased;font-family: Arial, Helvetica, sans-serif}
         .ExternalClass {width:100%;}
         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
         img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
         a img {border:none;}
         .appleLink, .appleLink a { color: #000000; text-decoration: none; }
         table td { border:0;}
         @media only screen and (max-width: 599px) {
         body[yahoo] .hide {display:none !important;}
         body[yahoo] table {width:100% !important; background:#ffffff !important;}
         body[yahoo] img[class="fluid"] {max-width:100% !important;width:100% !important;height: auto !important;-ms-interpolation-mode: bicubic !important;}
         body[yahoo] div {height:auto !important;}
         body[yahoo] table td { border:0 !important;}
         }
      </style>
   </head>
   <body yahoo="fix">
      <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
         <tbody>
            <tr>
               <td style="border-collapse: collapse;">
                  <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td style="border-collapse: collapse;" width="27%">
                           <div style="height:323px"><img style="display:block; border:none;" src="http://dummyimage.com/162x323/274091/fff" width="162" height="323" alt="" class="fluid"/></div>
                        </td>
                        <td style="border-collapse: collapse;" width="46%">
                           <div style="height:323px"><a href="#" target="_blank"><img style="display:block; border:none;" src="http://dummyimage.com/276x323/f21f0c/fff" width="276" height="323" alt="" class="fluid"/></a></div>
                        </td>
                        <td style="border-collapse: collapse;" width="27%">
                           <div style="height:323px"><img style="display:block; border:none;" src="http://dummyimage.com/162x323/2b7801/fff" width="162" height="323" alt="" class="fluid"/></div>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
            <tr>
               <td bgcolor="#000000"><img style="display:block; border:none;" src="http://dummyimage.com/10x10/050505/fff" width="10" height="10"/></td>
            </tr>
            <tr>
               <td style="border-collapse: collapse;">
                  <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td style="border-collapse: collapse;" width="46%">
                           <div style="height:323px"><a href="#" target="_blank"><img style="display:block; border:none;" src="http://dummyimage.com/276x323/f21f0c/fff" width="276" height="323" alt="" class="fluid"/></a></div>
                        </td>
                        <td style="border-collapse: collapse;" width="27%">
                           <div style="height:323px"><img style="display:block; border:none;" src="http://dummyimage.com/162x323/2b7801/fff" width="162" height="323" alt="" class="fluid"/></div>
                        </td>
                        <td style="border-collapse: collapse;" width="27%">
                           <div style="height:323px"><img style="display:block; border:none;" src="http://dummyimage.com/162x323/274091/fff" width="162" height="323" alt="" class="fluid"/></div>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
         </tbody>
      </table>
   </body>
</html>