【问题标题】:Swap image with media queries without using background image使用媒体查询交换图像而不使用背景图像
【发布时间】:2015-06-08 22:50:13
【问题描述】:

我已经修改了一个 Marketo 响应式电子邮件模板,并且需要在媒体查询到达断点时更换标题图像。然而许多版本的outlook不支持背景图片(谢谢Micro$uk)那么有没有办法编写CSS来用src而不是background-image替换图片?这是来自 litmus.com 的屏幕截图,您可以看到该图像没有出现在许多版本的 Outlook 中。

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

【问题讨论】:

  • 您可以考虑隐藏主标题并显示带有不同图像的较小标题。重复的内容是的,但在电子邮件中,没什么大不了的。

标签: css image email media-queries marketo


【解决方案1】:

在 HTML 中...

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

然后在 javascript 中试试这个...(我还没有测试过)

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

【讨论】:

  • 我向一位同事提到了一个 javascript hack,但由于安全性,他就像 NOOOOOOOOO。
【解决方案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 的高度替换“#”,您就可以将该断点设置为您需要的任何值。我得到了非常好的结果,并通过了所有的石蕊测试,除了莲花笔记。

希望对您有所帮助。

【讨论】:

    猜你喜欢
    • 2014-08-14
    • 1970-01-01
    • 1970-01-01
    • 2020-10-11
    • 2016-11-30
    • 2011-06-25
    • 2014-01-26
    • 2011-12-11
    • 2019-04-27
    相关资源
    最近更新 更多