Outlook Mac 中电子邮件签名中的压缩图像答案

【问题标题】：Squashed images in email signature in Outlook MacOutlook Mac 中电子邮件签名中的压缩图像
【发布时间】：2022-08-20 05:45:42
【问题描述】：

我正在用 html 组装我公司的签名。它适用于 Windows Outlook，但在 Mac 中图像被粉碎。我不明白错误可能出在哪里。

附件是错误的图像及其外观。

签名图像错误

签名图片不错

 <table border=\"0\" width=\"320\" height=\"158\" cellpadding=\"0\" cellspacing=\"0\">

    <tr>
        <td align=\"center\" width=\"36%\">
            <!-- aqui se pone las fotos -->
            <img width=\"91\" style=\"width: 91px;padding-bottom: 1%;\"
                src=\"https://espartadigital.com/wp-content/uploads/2022/05/Carlos.png\" alt=\"Foto-Carlos\">
        </td>

        <td width=\"64%\" align=\"left\">
            <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" heigth=\"105\"
                style=\"color: #ee7601;font-family: \'Raleway\', sans-serif; font-weight: bold;\">

                <tr>
                    <!-- aqui se pone el nombre -->
                    <td colspan=\"2\" style=\"line-height: 14px\">
                      <span style=\"font-size: 15px; font-weight: 900;\" >Carlos Fabuel</span> <br>
                    <!-- aqui se pone el cargo -->
                      <span  style=\"font-size: 12px;\">SEO Account Manager</span>
                    </td>
                </tr>


                <!-- elimina este bloque si no tiene telefono -->

                <tr style=\"line-height: 14px;\">
                    <td align=\"left\" width=\"10%\">
                        <!-- aqui se pone el telefono -->
                        <img style=\"padding-bottom: 4px;\" width=\"10\"
                            src=\"https://espartadigital.com/wp-content/uploads/2022/05/phone-call.png\" alt=\"\">
                    </td>
                    <td align=\"left\" style=\"font-size: 10px;\"><span> 960 64 98 57</span>
                    </td>
                </tr>


                <tr style=\"line-height: 14px;\">
                    <td align=\"left\" width=\"10%\">
                        <img style=\"padding-bottom: 4px;\" width=\"10\"
                            src=\"https://espartadigital.com/wp-content/uploads/2022/05/linkedin.png\" alt=\"\">
                    </td>

                    <td align=\"left\" style=\"font-size: 10px;\"> <a
                            style=\"text-decoration: none !important; color: #ee7601;\"
                            href=\"hhttps://www.linkedin.com/in/carlosfabuel/\">Linkedin/CarlosFabuel/</a> </td>
                </tr>
            

                <!-- fin del bloque a eliminar -->

            </table>

        </td>
    </tr>

    <tr>
        <td colspan=\"2\">
            <img src=\"https://espartadigital.com/wp-content/uploads/2022/05/Barra-con-logo-1.png\" alt=\"Eslogan-logo\">
        </td>
    </tr>

</table>

标签： email outlook html-email outlook-for-mac

【解决方案1】：

看起来高度正在以某种方式受到干扰。

您可以将图像的高度与已有的宽度放在一起。

<img width="91" height="91" style="width: 91px;padding-bottom: 1%;" src="https://espartadigital.com/wp-content/uploads/2022/05/Carlos.png" alt="Foto-Carlos">

如果您想要更大的图像，例如底部的响应式图像，您可以执行以下操作：

<img width="320" height="53" style="max-width:100%;height:auto;" src="https://espartadigital.com/wp-content/uploads/2022/05/Barra-con-logo-1.png" alt="Eslogan-logo">

因此，在较小的屏幕上，max-width 将自动启动并减小宽度，而 height:auto 将自动计算正确的比例高度。

【讨论】：