Обмен изображениями с медиа-запросами без использования фонового изображения

Question

Я модифицировал шаблон, чувствительный к маркетингу в Marketo, и вам нужно поменять изображение заголовка, когда медиа-запрос попадает в точку останова. Однако многие версии Outlook не поддерживают фоновое изображение (спасибо Micro $ uk), так есть способ написать CSS для замены изображения с помощью src, а не фонового изображения? Вот скриншот с litmus.com, вы можете видеть, что изображение не отображается во многих версиях Outlook.

<img src="image1"/> to <img src="image2"/> 

Answer 1

В HTML ...

<div style="src:www.google.com"></div> 

И попробовать это в JavaScript ... (я не проверял)

Element.getElementsByTagName('img')[0].src='www.google.com'; 

Answer 2

Javascript, вероятно, не работать во многих почтовых клиентах. Я использую приведенный ниже код для моих шаблонов электронной почты в формате HTML.

HTML

<a href="#" border="0"> 
    <span id="mobile"> 
    <img id="mainimg" class="headimg" src="#" alt="..."> 
    </span> 
</a> 

CSS

@media only screen and (max-width: 450px) { 
span[id=mobile] { 
    display:block; 
    background-image: url(#) !important; 
    background-repeat: no-repeat !important; 
    background-position: top center !important; 
    width: 100% !important; 
    height: # !important; 
} 
img[id=mainimg] { 
    display: none !important; 
} 
} 

просто заменить "#" ж/ваши ссылки и/или высоты мобильного IMG и вы можете установить эту точку останова в любой вам это нужно. я получаю действительно хорошие результаты и передаю все лакмусовые тесты за исключением примечаний лотоса.

надеюсь, что это поможет.