为什么HTML电子邮件中的嵌入图像会被推高？_Html_Css_Email_Outlook

为什么HTML电子邮件中的嵌入图像会被推高？

html css email outlook

为什么HTML电子邮件中的嵌入图像会被推高？,html,css,email,outlook,Html,Css,Email,Outlook,我正在尝试在Outlook上发送一个简单的HTML EDM。HTML只包含一个环绕图像（EDM的内容）的表格，我可以将其附加到Outlook中并作为文本插入，以及图像文件的附件原始图像大小约为600像素宽，2500像素高。我希望图像显示的宽度为100% 我知道MSO有一些样式限制。我已经用下面的代码实现了100%的宽度，但是，图像似乎被垂直推离电子邮件正文，这意味着图像顶部有四分之一的区域看不见，好像被切断了一样以下是我编写的代码： <!DOCTYPE html PUBLIC

我正在尝试在Outlook上发送一个简单的HTML EDM。HTML只包含一个环绕图像（EDM的内容）的表格，我可以将其附加到Outlook中并作为文本插入，以及图像文件的附件

原始图像大小约为600像素宽，2500像素高。我希望图像显示的宽度为100%

我知道MSO有一些样式限制。我已经用下面的代码实现了100%的宽度，但是，图像似乎被垂直推离电子邮件正文，这意味着图像顶部有四分之一的区域看不见，好像被切断了一样

以下是我编写的代码：

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Marketing Newsletter</title>
</head>

<body>
    <table width="100%" height="auto">
        <tr>
            <td>
                <img src='cid:Email.png' style="display:block"/>
            </td>
        </tr>
    </table>
</body>
</html>


我的营销通讯

我引用了，不使用线条高度和使用

display:block

，但仍然没有分辨率。为什么?

已更新

这就是结果的样子，注意它们是模仿的，而不是真实的屏幕截图

我认为它应该是什么样子（100%宽度，高度：自动）：

结果是：

将填充顶部指定给td或table时的外观：

没有桌子时的样子：

您需要设置td的样式，并使其宽度足以容纳图像。为了正确工作，您的桌子宽度和高度必须大于imagr。td的宽度和高度自动可能会使其正确显示img C。将值设为px。

问题在于Outlook对图像的高度限制。请阅读此处（）极限约为1728px高

解决问题的步骤：

将图像裁剪到大约1250px高
在HTML中垂直堆叠两个裁剪的图像

能否尝试在表格和图像中添加以像素为单位的显式宽度/高度？它可能在height=“auto”上卡住了。较旧版本的Outlook对图像的高度也有限制，这导致了一些问题。我想你应该可以使用2500px，但无论如何还是要小心。@BenC，我试图添加明确的宽度/高度，但不起作用。我试着把桌子移走，桌子的顶部不再被切断。然而，尽管img上有明确的宽度/高度，Outlook还是会自动调整图像的大小。我试图从上面的代码中复制电子邮件的图像，其中宽度达到100%，然后将其拆分为两个剪切的部分粘在一起，以便可以看到顶部。它可以工作，因此高度不是问题。不确定代码/Outlook表格有什么问题。@BenC，抱歉，我误读了您关于图像高度限制的评论，将其视为电子邮件内容的限制。你的谨慎奏效了。我将图像分割成两个较短的图像并将它们堆叠起来。谢谢宽度可以，如上所述。我还尝试了显式的宽度/高度值，没有分辨率。图像被向上推，图像的顶部被切掉，宽度很好。你能把图像添加到你的问题中吗？屏幕快照你的td高度值是否也比你的图像大？您好，我尝试过添加比我的图像大的td高度，仍然得到相同的结果。在td中添加了填充，图像看起来就像被切断了一样。我想你可以通过使用src img和上传图像链接来解决这个问题，而不是附加图像。尝试上传你的图片到一个网站，而不是cid只是使用img的链接。