HTML电子邮件-在表格中重新调整图片大小

好吧，我的问题是我想在我的HTML电子邮件上有一个自动缩放到页面大小的图像，最大宽度为400px

通过使用以下代码，我自己创建它没有问题：

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

然而，一旦我把这段代码放进一个表中（因为我使用很多表来创建HTML电子邮件），它就不起作用了

---

有人能解决这个问题吗？

只要您的桌子有一定的宽度，大部分情况下都可以。您需要

最大宽度：400px用于图像，它需要位于流体宽度（基于百分比）表格容器中才能工作。请记住，outlook不支持
max width
，在较小的窗口中查看时可能会破坏布局

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

就我个人而言，我不喜欢流畅的电子邮件。我在
标记中使用
@media query
来调整大小。
最好的方法是将图像放在表中，然后使用@media来更改发生的情况。（我在下面放了一些代码）

将表格宽度设置为所需图像的最大尺寸。（同时将td宽度设置为相同。如果媒体查询启动后，您不这样做，它将改变您的一些大小。）

将类应用于表和图像

还要确保在图像上加上宽度和高度。某些电子邮件客户端（即outlook旧版本）无法正确调整图像大小。该类用于固定图像大小

我还建议使用HTML5doctype（）。大多数信息都说使用XHTML过渡Doctype。但我发现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>


许多电子邮件代理不太擅长阅读CSS或内联样式。如果你想保持邮件外观的一致性，你可能需要做出一些妥协。以HTML电子邮件样板文件为起点。Outlook和其他主要电子邮件客户端是否支持@media query？不支持。但为什么要担心人们在一个小桌面窗口中阅读电子邮件呢？大多数HTML电子邮件都不是流畅的，是为640像素的桌面窗口设计的。设计流畅电子邮件的人将所有内容都放在一列中，并将文本保持在较小的范围内，以便将文本放入移动电子邮件客户端@media query允许我们根据支持它的客户端调整文本、图像和表格元素的大小，这是大多数移动电子邮件客户端（iOS mail、Android mail、WP7，但不是gmail）。不支持它的客户端将忽略它以及其中的所有css。