CODEWITHSUNDEEP
htmlcssemailresponsive-design
BevansDesign
BevansDesign

Reputation: 5108

Responsive scaling of images within table cells causes gaps in Chrome

I'm trying to set up my company's emails to be more mobile-friendly. And unfortunately, because this is email-based, I have to build `em like it's 1999: tables and image slices, mostly.

I have tables that are set to a specific width, no defined height. Never more than one row per table, and usually 2-3 columns. One image per table cell. Currently, I'm not defining the dimensions of the table cells or images.

Here's my new responsive code I'm working on:

@media (max-width: 670px) { 
    body { 
        background-color: red !important; /* for testing */
    }
    table {
        width: 100% !important;
        height: auto !important;
    }
    table img {
        width: 100% !important;
        height: auto !important;
    }
}
@media (max-width: 480px) { 
    body { 
        background-color: blue !important; /* for testing */
    }
}

http://codepen.io/BevansDesign/pen/CnAfB

As you can see on my Codepen page, if you shrink the width of the window, the graphics will shrink down appropriately. However in Chrome, I get a lot of gaps between the images (green lines), due to pixel-based scaling being a bit weird. (Works fine in FF, doesn't work at all in IE8 of course, and I haven't tested it on anything else yet.)

Does anyone know how I can get rid of those gaps? I've tried setting the image height to 100%, but that just leaves the images at their original height and squishes them horizontally.

I know I can fix this by setting all the dimensions manually, but I'm looking for a solution with as little tweaking as possible, since I'm pumping out these emails 2-3 times each week.

Thanks for your help!

Upvotes: 0

Views: 1953

Answers (2)

Hall
Hall

Reputation: 1

Best solution I ever found to this problem is to use a background image with the slices saved as a grid of transparent GIFs instead. The gaps still appear but they're not visible.

In my example below, the first table uses regular slices and you'll see the narrow 1 or 2 pixel gaps appearing as you scale it in a browser. Chrome seems to be the worst but it happens in other browsers too.

The second table uses my background and GIFs technique. Responsive styles switch the image to a Retina-friendly hi-res version.

<!DOCTYPE html>
<html>
<head>
<title>Slices</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style type="text/css">
        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        img { -ms-interpolation-mode: bicubic; }
        img { border: 0; line-height: 100%; outline: none; text-decoration: none; }
        table { border-collapse: collapse !important; }
        body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }


    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .switch-background {
        background-image: url(http://www.interactiveemail.co.uk/DB/slices/full_image_hi.jpg) !important; 
        background-repeat: no-repeat !important; 
        background-size: 100% !important; 
      }
}


        @media screen and (max-width: 640px) {
            table { width: 100% !important; max-width: 414px !important; }
            table img { width: 100% !important; height: auto !important; }
      .switch-background {
        background-image: url(http://www.interactiveemail.co.uk/DB/slices/full_image_hi.jpg) !important; 
        background-repeat: no-repeat !important; 
        background-size: 100% !important; 
      }



        div[style*="margin: 16px 0;"] { margin: 0 !important; }
    </style>

</head>

<body style="background-color: #ffffff; margin: 0 !important; padding: 0 !important;">

<!-- 100% table start -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" bgcolor="#ffffff">

            <!-- Regular slices -->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_01.jpg" alt="Slice 1" width="201" height="106" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_02.jpg" alt="Slice 2" width="266" height="106" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_03.jpg" alt="Slice 3" width="133" height="106" style="display: block;"></td>
                </tr>
                <tr>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_04.jpg" alt="Slice 4" width="201" height="172" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_05.jpg" alt="Slice 5" width="266" height="172" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_06.jpg" alt="Slice 6" width="133" height="172" style="display: block;"></td>
                </tr>
                <tr>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_07.jpg" alt="Slice 7" width="201" height="123" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_08.jpg" alt="Slice 8" width="266" height="123" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_09.jpg" alt="Slice 9" width="133" height="123" style="display: block;"></td>
                </tr>
            </table>            

            <br><br>

            <!-- Transparent slices -->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" background="http://www.interactiveemail.co.uk/DB/slices/full_image_lo.jpg" class="switch-background">
              <tr>
                <td><!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:401px;">
                    <v:fill type="tile" src="http://www.interactiveemail.co.uk/DB/slices/full_image_lo.jpg" color="#ffffff" />
                    <v:textbox inset="0,0,0,0">
                    <![endif]-->
                    <div><table width="600" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_01.gif" alt="Slice 1" width="201" height="106" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_02.gif" alt="Slice 2" width="266" height="106" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_03.gif" alt="Slice 3" width="133" height="106" style="display: block;"></td>
                      </tr>
                      <tr>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_04.gif" alt="Slice 4" width="201" height="172" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_05.gif" alt="Slice 5" width="266" height="172" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_06.gif" alt="Slice 6" width="133" height="172" style="display: block;"></td>
                      </tr>
                      <tr>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_07.gif" alt="Slice 7" width="201" height="123" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_08.gif" alt="Slice 8" width="266" height="123" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_09.gif" alt="Slice 9" width="133" height="123" style="display: block;"></td>
                      </tr>       
                    </table></div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
              </td>
             </tr>
            </table>    

        </td>
    </tr>
</table>
<!-- 100% table end -->

</body>
</html>

Upvotes: 0

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

It might help you

source

Option 1.) Add style="display:block" to your image

<img src="http://www.test.com/test.jpg" style="display:block">

Options 2.) If your image height is greater than 16px, set the "align" attribute in the image to any of the following: absmiddle, middle, left, right, absbottom, texttop OR top

<img src="http://www.test.com/test.jpg" align="absbottom">

Option 3.) Place the image in a block element with a style="line-height:10px" (or lower) Example:

<div style="line-height:10px"><img src="http://www.test.com/test.jpg"></div>

Option 4.) Place the image in a block element with a style="font-size:2px" (or lower)

<div style="font-size:2px"><img src="http://www.test.com/test.jpg"></div>

Option 5.) Add style="float:left" OR style="float:right"

<img src="http://www.test.com/test.jpg" style="float:left">

Upvotes: 1

Related Questions