使用媒體查詢交換圖像而不使用背景圖像

我修改了一個Marketo響應式電子郵件模板，並且在媒體查詢達到其斷點時需要換出標題圖像。然而，許多版本的Outlook 不支持背景圖片（謝謝Micro $ uk），那麼有沒有辦法編寫CSS來將圖像換成src而不是background-image？這是來自litmus.com的屏幕截圖，您可以看到該圖像未出現在許多版本的Outlook中。使用媒體查詢交換圖像而不使用背景圖像

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

Litmus Screens

來源

2015-04-03 DivineChef

您可以考慮隱藏主標題並使用不同的圖像顯示較小的標題。重複的內容是，但在一封電子郵件中，沒有什麼大不了的。 – dward 2015-04-03 20:46:52

在HTML ...

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

並嘗試這在JavaScript ...（我沒有測試過）

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

來源

2015-04-03 20:30:43 user4723924

我提到一個JavaScript黑客給同事，他因爲安全性而喜歡NOOOOOOOOO。 – DivineChef 2015-04-03 21:17:58

的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; 
} 
}

只需更換「＃」 W /你的鏈接和/或移動IMG的高度，你可以設置斷點什麼你需要它。我得到了非常好的結果，並通過了蓮花筆記的所有石蕊試驗。

希望有幫助。

來源

2015-05-05 17:58:46

使用媒體查詢交換圖像而不使用背景圖像

回答

相關問題