HTML电子邮件签名中的图像大小不同

时间:2019-10-01 19:43:06

标签: html email outlook

在为公司制作的电子邮件签名中,左侧有一个嵌入式图像。当我在Chrome或IDE中预览代码时,图像的大小应适当调整,并占据与右侧三行等距文本相同的高度。但是,当公司中的其他人收到我的电子邮件时,有时图像的高度明显高于其旁边的文本行。如何确保我的图像在设备和电子邮件客户端之间保持一致的大小?

    <html>
    <STYLE>A {text-decoration: none;} </STYLE><body>
        <table data-mysignature-date="2019-09-17T19:52:14.752Z" data-mysignature-is-paid="0" width="500" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td>
                    <table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td
                               valign="center" width="0" style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" width="100" style="width:67px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
                            </td>
    
                            <td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
                                <table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:90%;color: #000001;">
                                    <tr>
                                        <td>
                                            <div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
                                                [COMPANY NAME]
                                            </div>
                                        </td>
                                    </tr>
    
                                    <tr>
                                        <td style="padding: 0px 0;">
                                            <div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
                                                <b> Austin Berenyi </b>
                                                <span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
                                                <span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Graphic Designer</i> </span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><a href="mailto:austin@tetonsports.com" target="_blank" style="font-family:Helvetica, Geneva, sans-serif;color: #54565A;"><i>austin@company.com</i></a></span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
    </html>

1 个答案:

答案 0 :(得分:1)

这听起来很幼稚,但请尝试指定img的高度:

<img alt="TETON Sports" style="width:67px; height: 48px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">

此外,请尝试始终设置文本(像素或em)的字体大小,并尝试避免将这些值作为百分比。