Question

这里的秘密是什么？我的图像位于电子邮件的顶部。它是一个矩形条，全宽。但它在gmail和outlook中延伸，但在Mail客户端（mac）中，它运行得很好。（图片是下面看到的黑条）

<html>
<head>
    <style>
        td{
            font-size:1.2em;
            line-height:2;
        }
        .footer_add{
            font-size:0.9em;
            margin-top:2em;
            line-height:1;
        }
        .footer_content{
            font-size:0.9em;
            line-height:1;
        }           
        .footer_contactus{
            font-size:0.9em;
            line-height:1;
        }                       
    </style>    
</head>
<body style="background-color: whitesmoke;">
<div style="margin-top:-3em;">
    <img src="cid:email-header">
</div>
<table>
    <tr>
        <td>
            <table>
                <tr><td style="overflow:hidden;height:0.5em"></td></tr>
                <tr>
                    <td><?php echo(COUNT_MSG_0. $receipient_display_name)?></td>
                    <td></td>
                </tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>                                                          
                <tr>
                    <td style="align:justify"><?php echo(COUNT_MSG_14.$sender_display_name.". ".COUNT_MSG_15); ?></td>
                </tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td><?php echo(COUNT_MSG_17);?></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>  
                <tr><td></td></tr>
                <tr><td></td></tr>                                                                          
                <tr>
                    <td style="line-height:1"><?php echo(COUNT_MSG_6); ?></td>
                </tr>
                <tr>
                    <td style="line-height:1"><img src="cid:my-attach1" ><label style="font-family: Open Sans">Nottx</label></td>
                </tr>               
            </table>            
        </td>
    </tr>                                       
</table>

</body>
<footer>    
  <p class="footer_add">&nbsp; </p>
  <hr>
  <p class="footer_content">&nbsp; </p>
  <p class="footer_contactus">&nbsp; <?php echo(COUNT_MSG_99);?></p>
</footer>

Answer 1

尝试在样式表中将图片的width设置为100%：

img { width: 100%; }

Answer 2

您遇到的问题是实际图像尺寸超过1300像素宽。当设置为100％时，一些电子邮件客户端会将图像拉伸到图像的实际大小（Outlook是主要元凶）。

最好的解决方案是使用表而不是图像（如果它只是一个将要使用的单个彩色条）。您可以将宽度设置为100％，将高度设置为您需要的宽度，它将比图像更好地流动，即使启用了图像阻止也会显示。

超简化示例：<table width="100%" bgcolor="yourgreycolor"><tr><td height="50" style="font-size:50px; mso-line-height-rule:exactly; line-height:100%;"> </td></tr></table>

如果您需要它作为图像，Outlook将在没有定义宽度的情况下中断或将图像的实际大小设置为您希望它显示的最大宽度。

我可能会将它移到div之外，而不是下面的表格（表格样式更加一致），我会确保在图像上包含HTML“width”属性。（<img width="100%" src="...）并且可能在电子邮件中包含最大宽度。但是在某些客户端中没有读取最大宽度（http://www.campaignmonitor.com/css）。

HTML和CSS存在一些其他问题，可能无法很好地转换为HTML电子邮件。有关如何设计和开发HTML电子邮件的一些指南，请参阅下文：

https://www.exacttarget.com/products/email-marketing/email-design-toolkit https://litmus.com/blog/html-email-coding-101-infographic http://templates.mailchimp.com/getting-started/html-email-basics/ http://www.sitepoint.com/how-to-code-html-email-newsletters/

图像标题适合所有电子邮件客户端和浏览器

2 个答案: