HTML EMAIL - 图片在表格中重新调整大小答案

【问题标题】：HTML EMAIL - picture re-sizing in a tableHTML EMAIL - 图片在表格中重新调整大小
【发布时间】：2013-10-02 08:55:34
【问题描述】：

好的，所以我的问题是我想在我的 HTML 电子邮件中添加一个自动缩放到页面大小的图像，最大宽度为 400 像素。

使用以下代码自行创建它没有问题：

<div style="max-width:400px">
<img src="example.jpg" style="max-width:100%">
</div>

但是，一旦我将此代码放入表格中（因为我使用大量表格来创建我的 HTML 电子邮件），它就不起作用了。

有没有人能解决这个问题？

【问题讨论】：

许多电子邮件代理不太擅长阅读 CSS 或内联样式。如果您希望电子邮件的外观保持一致，您可能需要做出一些妥协。以 HTML 电子邮件样板为起点。 htmlemailboilerplate.com

标签： html image html-email css

【解决方案1】：

大多数情况下都可以，只要您的表格具有百分比宽度即可。您需要为图像提供max-width:400px;，并且它需要位于流动宽度（基于百分比）的表格容器中才能工作。请记住 max-width 在 Outlook 中不受支持，在较小的窗口中查看时可能会破坏您的布局。

此外，div 在电子邮件中的用途很少（可靠）。坚持使用表格，除非您将 div 用于特殊用途，例如使用 overflow:hidden; 隐藏内容

就我个人而言，我不喜欢流畅的电子邮件。我在<style> 标签中使用@media-query 来调整大小。

【讨论】：

Outlook 和其他主要电子邮件客户端是否支持@media-query？
没有。但是为什么要担心人们在一个小的桌面窗口中阅读他们的电子邮件呢？大多数 HTML 电子邮件都不是流畅的，并且是为 640 像素的桌面窗口设计的。设计流畅电子邮件的人将所有内容放在一列中，并保持文本较小，以便文本适合移动电子邮件客户端。 @media-query 允许我们为支持它的客户端调整文本、图像和表格元素的大小，这是大多数移动电子邮件客户端（iOS 邮件、Android 邮件、WP7，但不是 gmail）。不支持的客户端会忽略它和里面的所有css。

【解决方案2】：

最好的方法是将您的图像放在一个表格中并使用@media 来改变发生的情况。（我在下面放了一些代码）

将表格宽度设置为所需图像的最大尺寸。（还将 td 宽度设置为相同。如果您不这样做，一旦媒体查询启动，它就会影响您的一些尺寸。）
将类应用于表格和图像。
还要确保在图像上设置宽度和高度。某些电子邮件客户端（即 Outlook 旧版本）无法正确调整图像大小。该类旨在修复图像大小。
我还建议使用 HTML 5 Doctype ( )。那里的大多数信息都说要使用 XHTML 过渡文档类型。但我发现 HTML5 Doctype 的效果很好，尤其是响应式图像缩放。

CSS

@media only screen and (max-width: 400px){
    *[class=imgResize] {
        width: 100% !important;
        height: auto !important;
    }
}

HTML

<table width="400" border="0" cellspacing="0" cellpadding="0" class="imgResize">
    <tr>
        <td width="400">
            <img src="example.jpg" width="400" height="200" style="display:block;" class="imgResize">
        </td>
    </tr>
</table>

【讨论】：