Как только я начал писать электронные письма с обратной связью, я заметил, что смежные изображения (все с одинаковой высотой) в строке таблицы HTML не всегда остаются одинаковыми, когда они реагируют масштабируется. Это большая проблема для меня, потому что макеты электронной почты, над которыми я работаю, являются тяжелыми и должны быть плотно выровнены. Неравномерные изображения высоты разбивают макет. В итоге я придумал решение, представленное здесь: http://am-samples.gear.host/iPhone5S-iO7-issue.htmliPhone 5S iOS7 Отзывчивая электронная почта Неповторимая высота изображения Проблема
Перейдите к этому URL-адресу и измените размер браузера, чтобы увидеть отзывчивое масштабирование в действии.
Вот основные фрагменты в случае, если вы не можете перемещаться к вышеуказанному URL:
таблицы, которая имеет непрерывные образы классов
<table class="100p" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#7fff00" style="background-color: #7fff00;">
<tr>
<td class="100p" align="center" width="100%" valign="top">
<div>
<table class="100p" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="100p" width="100%" align="left" valign="top">
<span width="26.09375%" style="width: 26.09375%; display: inline-block;">
<img id="ourStory" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-our-story.png" border="0" style="display: block;" />
</span><span width="19.6875%" style="width: 19.6875%; display: inline-block;">
<img id="recipes" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-recipes.png" border="0" style="display: block;" />
</span><span width="25.15625%" style="width: 25.15625%; display: inline-block;">
<img id="seafood" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-seafood.png" border="0" style="display: block;" />
</span><span width="29.0625%" style="width: 29.0625%; display: inline-block;">
<img id="giftCards" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-giftcards.png" border="0" style="display: block;" />
</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
CSS ссылки
.responsiveImage {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border: none;
}
*[class="100p"] {
width: 100% !important;
height: auto !important;
}
Я разделил код до сути, чтобы четко представить проблему. Если вы посмотрите на исходный код, вы увидите, что верхняя и нижняя черные полосы - это просто таблицы с черным цветом фона. Красная полоска фактически состоит из смежных изображений. Исходная высота всех изображений одинакова. Из-за этого я ожидал, что высота всех изображений будет одинаково масштабироваться. Таблица, содержащая изображения, имеет фоновый цвет florescent green. Таким образом, в Litmus легко увидеть, отличается ли высота любого изображения.
Я протестировал это решение в Litmus, и он отлично работает на почтовых клиентах, которые меня интересуют, кроме двух: iPhone 5S (iOS7 и iOS8). Вот скриншот результата в iPhone 5S и iOS7 (iOS 8 дает аналогичный результат): http://am-samples.gear.host/images/iPhone5S-iOS7-issue.jpg
Таким образом, проблема заключается в том, что при масштабировании иногда высота изображения не одинакова. Любые идеи о том, как исправить это на iPhone 5S?