Image Height Not Displaying Right in HTML Email

Question

The images in HTML mail top menu are not displaying right in the iPhone mail app. More specifically, the heights in some of them. Please take a look at this screenshot:

                                            <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;
        }

The last three images in the menu, Costumes, Sale, and Teacher Wholesale, are all different heights. This only happens on the iPhone mail app. I tested on Android Gmail, desktop, Outlook, etc., and this doesn't happen. Please help.

Answer 1

It's always a good idea to set the height attribute of <img> elements in emails. As you mentioned in your comment, it's also necessary to remove the width: 100% !important; declaration from the CSS. That was likely causing the images to scale up as the table cells expanded to fill the available space.

Answer 2

Why don't you try adding a min-height property to your img tags in your css.

Such as:

img {
   min-height: 3em;
}