html - 表格单元格内图像的响应缩放导致 Chrome 中出现间隙

Question

我正在尝试将我公司的电子邮件设置为更适合移动设备。不幸的是，因为这是基于电子邮件的，所以我必须像 1999 年那样构建它们:主要是表格和图像切片。

我有设置为特定宽度但没有定义高度的表格。每个表从不超过一行，通常是 2-3 列。每个表格单元格一张图片。目前，我没有定义表格单元格或图像的尺寸。

这是我正在处理的新响应代码:

@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

正如你在我的Codepen页面上看到的，如果你缩小窗口的宽度，图形会适当缩小。但是在 Chrome 中，由于基于像素的缩放有点奇怪，我在图像(绿线)之间发现了很多间隙。 (在 FF 中工作正常，当然在 IE8 中根本不工作，而且我还没有在其他任何东西上测试它。)

有谁知道我怎样才能消除这些差距？我试过将图像高度设置为 100%，但这只会使图像保持原始高度并水平挤压它们。

我知道我可以通过手动设置所有尺寸来解决这个问题，但我正在寻找一个调整尽可能少的解决方案，因为我每周发送这些电子邮件 2-3 次。

感谢您的帮助!

Answer 1

可能对你有帮助

source

选项 1.) 将 style="display:block"添加到您的图像

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

选项 2.) 如果您的图像高度大于 16px，请将图像中的“align”属性设置为以下任何一个:absmiddle、middle、left、right、absbottom、texttop 或 top

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

选项 3.) 将图像放置在具有 style="line-height:10px"(或更低)的 block 元素中示例:

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

选项 4.) 将图像放置在具有 style="font-size:2px"(或更小)的 block 元素中

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

选项 5.) 添加 style="float:left"或 style="float:right"

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