在Outlook中縮放視網膜圖像（不使用img屬性）

我正在開發自動化工具的模板，並且存在縮放視圖中的視網膜圖像的問題。
我明白，通常你必須使用圖像屬性，例如：style =「max-width：100px; width：100％;」在Outlook中縮放視網膜圖像（不使用img屬性）

問題是，如果要在模板模式下工作的用戶將替換圖像，該工具會替換整個圖像標記（並因此替換爲我的內聯css）。

我想知道如果有人知道另一個解決方案的展望在擴大化問題？將這些樣式放在周圍的div，表格或td上並不幸運。

提前致謝！

2017-08-30 Loren Degel

你可以用這個嘗試：

<!doctype html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style type="text/css"> 
     @media only screen and (max-width: 479px) { 
     .deviceWidth { 
      width:300px !important; 
      height:auto; 
      } 
     } 
    </style> 
    </head> 
<body> 
    <table width="600" class="deviceWidth"> 
     <tr> 
      <td> 
       Retina Image (600) using media queries. 
       <img class="deviceWidth" src="http://www.emailonacid.com/images/blog_images/Emailology/2015/Flower_600.jpg" width="600" ><br/>  
      </td> 
     </tr> 
    </table>

據this文章，它應該是一個有效的替代。

希望這可以幫助，

來源

2017-08-30 15:03:55

感謝您的答覆。恐怕這隻會在屏幕<479px時纔會取代圖像。那麼，在桌面計算機上使用Outlook打開電子郵件時會發生什麼？ –

的確如此，該示例中的媒體查詢僅適用於<= 479px。但是，如果將容器限制爲600像素並將媒體查詢分隔符更改爲600像素，該怎麼辦？另一種替代方法是在媒體查詢之外聲明一個回退，所以每個不符合條件的條件都會有一個安全網。 –

有道理！我會繼續測試這個。謝謝！ –

在Outlook中縮放視網膜圖像（不使用img屬性）

回答

相關問題