HTML 电子邮件中的图像高度未正确显示

Question

HTML 邮件顶部菜单中的图像在 iPhone 邮件应用程序中显示不正确。更具体地说，其中一些的高度。请看这张截图：

                                            <tr>
                                                <td>
                                                    <table border="0" cellspacing="0" cellpadding="0" summary="">
                                                        <tbody>
                                                            <tr>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/46x68/email-menu-2020-02-04_01.jpg" alt="New!" border="0" width="46" style="display: block; max-height: 68px; max-width: 46px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/88x68/email-menu-2020-02-04_02.jpg" alt="Leotards" border="0" width="88" style="display: block; max-height: 68px; max-width: 88px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/147x68/email-menu-2020-02-04_03.jpg" alt="Design Your Own" border="0" width="147" style="display: block; max-height: 68px; max-width: 147px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/64x68/email-menu-2020-02-04_04.jpg" alt="Shoes" border="0" width="64" style="display: block; max-height: 68px; max-width: 64px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/93x68/email-menu-2020-02-04_05.jpg" alt="Costumes" border="0" width="93" style="display: block; max-height: 68px; max-width: 93px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/52x68/email-menu-2020-02-04_06.jpg" alt="Sale" border="0" width="52" style="display: block; max-height: 68px; max-width: 52px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                                <td align="left" valign="top" style="margin: 0; padding: 0; font-size: 0; line-height: 0;">
                                                                    <p style="margin: 0; padding: 0; font-size: 0;">
                                                                        <img src="https://images.cordial.com/91/160x68/email-menu-2020-02-04_07.jpg" alt="Teacher Wholesale" border="0" width="160" style="display: block; max-height: 68px; max-width: 160px; width: 100%;">
                                                                    </p>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>

CSS:

        table[id="backgroundTable"] { padding: 0 !important; }
        img {
            width: 100% !important;
        }
        table {
            border-collapse: collapse !important;
        }
        td {
            margin: 0;
            padding: 0;
        }

菜单中的最后三张图片，Costumes、Sale 和 Teacher Wholesale，都是不同的高度。这只发生在 iPhone 邮件应用程序上。我在 Android Gmail、桌面、Outlook 等上进行了测试，但没有发生这种情况。请帮忙。

Answer 1

为什么不尝试在 css.

的 img 标签中添加 min-height 属性

如：

img {
   min-height: 3em;
}

Answer 2

在电子邮件中设置 <img> 元素的 height 属性总是一个好主意。正如您在评论中提到的，还需要从 CSS 中删除 width: 100% !important; 声明。这可能导致图像随着 table 单元格扩展以填充可用的 space.

而放大