使用媒体查询交换图像而不使用背景图像

Question

我修改了一个Marketo响应式电子邮件模板，当媒体查询到达其断点时需要换出标题图像。然而，许多版本的outlook 不支持背景图像（谢谢Micro $ uk）所以有没有办法编写CSS来换出src中的图像而不是背景图像？这是来自litmus.com的屏幕截图，您可以看到图像不会出现在许多版本的Outlook中。

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

Answer 1

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的高度替换“＃”，您就可以将该断点设置为您需要的断点。我得到了非常好的结果，并通过了所有的试金石，除了莲花笔记。

希望这会有所帮助。

Answer 2

在HTML中......

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

在javascript中尝试这个...（我还没有测试过它）

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