Создание адаптивных изображений в электронной почте с использованием простого HTML - PullRequest
Новая
       15

Создание адаптивных изображений в электронной почте с использованием простого HTML

0 голосов
/ 14 октября 2019

Я пытаюсь включить два изображения в качестве заголовка в электронное письмо, используя чистый HTML. Одно изображение будет покрывать 40% ширины экрана, а другое - 60% ширины (высота для обоих - просто автоматическая). Тем не менее, максимальная ширина для обоих изображений составляет 750 пикселей, поэтому на больших настольных устройствах комбинированная ширина не растягивается дальше этого.

Я узнал об одном трюке, связанном с установкой td на ширину 0 до ипосле основного контента, который хорошо работает для текста, но не так хорошо для моих изображений. Вот мой код прямо сейчас: 

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td width="0"></td>
    <td width="40%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 40%;" /></td>
    <td width="60%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 60%;" /></td>
    <td width="0"></td>
</tr>
</table>

А вот как изображения должны отображаться

Код, к сожалению, не работает;изображения всегда получают фиксированную ширину. Я пытался удалить пустые тд, я пытался использовать фиксированную ширину вместо процентов, я пытался использовать ширину отдельно и в качестве стиля, я пробовал все виды вариантов размещения ширины в разных местах, ноказалось бы, что бы я ни пытался, я не могу отображать изображения быстро, рядом. Это проблема на устройствах смартфонов, где изображения выглядят слишком большими. Естественно, я не могу использовать медиазапросы, так как они не поддерживаются в Outlook.

Есть предложения о том, как я могу отображать два изображения рядом друг с другом?

Спасибо!

Best, Javert

1 Ответ

0 голосов
/ 14 октября 2019

Попробуйте это. Надеюсь, это поможет. 

<div style="width:750px;">
<table style="width:100%;">
<tr>
<td style="width:40%; background-color: red; height:150px;"></td>
<td style="width:60%; background-color: yellow; height:150px;"></td>
</tr>
</table>
</div>
...