html - Responsive scaling of images within table cells causes gaps in Chrome -

html - Responsive scaling of images within table cells causes gaps in Chrome -

i'm trying set company's emails more mobile-friendly. , unfortunately, because email-based, have build `em it's 1999: tables , image slices, mostly.

i have tables set specific width, no defined height. never more 1 row per table, , 2-3 columns. 1 image per table cell. currently, i'm not defining dimensions of table cells or images.

here's new responsive code i'm working on:

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

http://codepen.io/bevansdesign/pen/cnafb

as can see on codepen page, if shrink width of window, graphics shrink downwards appropriately. in chrome, lot of gaps between images (green lines), due pixel-based scaling beingness bit weird. (works fine in ff, doesn't work @ in ie8 of course, , haven't tested on else yet.)

does know how can rid of gaps? i've tried setting image height 100%, leaves images @ original height , squishes them horizontally.

i know can prepare setting dimensions manually, i'm looking solution little tweaking possible, since i'm pumping out these emails 2-3 times each week.

thanks help!

it might help

source

option 1.) add together style="display:block" image

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

options 2.) if image height greater 16px, set "align" attribute in image of following: absmiddle, middle, left, right, absbottom, texttop or top

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

option 3.) place image in block element style="line-height:10px" (or lower) example:

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

option 4.) place image in block element style="font-size:2px" (or lower)

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

option 5.) add together style="float:left" or style="float:right"

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

html css email responsive-design