Содержание изображения в электронном письме подается с использованием динамических данных.Изображение представляет собой обложку книги, большую часть времени квадратную и иногда прямоугольную (высота больше ширины).
Код правильно отображает оба типа изображений в почтовом клиенте рабочего стола, но когда мы открываем электронную почту в iPhoneпрямоугольные изображения также сокращаются до квадратов.
Пример прямоугольного изображения на рабочем столе:
То же изображение, просматриваемое на iPhone:
<img> (содержится в <td>) имеет следующий код в шаблоне электронной почты:
<td style="padding: 22px 11px 0px; text-align: center">
<img src="http://placehold.it/170" width="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
</td>
Как мы видим из приведенного выше кода, <img> наследует класс, называемый «жидкость», который имеет следующие свойства в медиа-запросах:
@media screen and (max-width: 600px) {
.fluid {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
...
}
Я не являюсь клиентом внешнего интерфейса.Могу ли я получить некоторую помощь о том, почему я получаю квадраты на мобильных устройствах?
ОБНОВЛЕНИЕ:
Я также нашел следующий CSS-код в разделе медиазапросов выше:
.img221 {
width: 221px !important;
height: 221px !important;
}
Я заметил, что img221 упоминается в атрибуте класса <img>.