Высота изображения не отображается справа в HTML Email

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

Последние три изображения в Меню «Костюмы», «Продажа» и «Оптовая продажа учителей» имеют разную высоту Это происходит только в почтовом приложении iPhone. Я тестировал на Android Gmail, десктопе, Outlook и т. Д. c., Но этого не произошло. Пожалуйста, помогите.

Answer 1

Всегда полезно установить атрибут height элементов <img> в электронных письмах. Как вы упомянули в своем комментарии, также необходимо удалить объявление width: 100% !important; из CSS. Это, вероятно, приводило к увеличению масштаба изображений, когда ячейки таблицы расширялись, чтобы заполнить доступное пространство.

Answer 2

Почему бы вам не попробовать добавить свойство min-height к вашим тегам img в ваших css.

Например:

img {
   min-height: 3em;
}