Outlookのプロポーショナルhtml画像

Question

私は、サイズを変更し、<td>要素のCSSの幅と高さの属性を使用して互いに比例関係を作り、実際の画像の幅と高さを作成しようとしているこの<td>要素の％。

このコードを電子メールキャンペーンで使用しようとしています。問題は、このコードが正常に正常に動作することですが、見通しが元の幅と高さの値で画像をレンダリングしているように見えます。

誰も私がこれが起こるのを防ぐ方法を知っていますか？
注：画像srcとリンクをコードから削除しました。

<table width="100%"> <!-- a width 100% container --> 
    <tr> 
     <td></td> <!-- an empty cell, which will adapt its width --> 
     <td width=250 height=300> <!-- it's like max-width:200px --> 
     <a href="SOME LINK"> 
     <img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" /> 
     </a> 
     </td> 
     <td></td> <!-- another empty cell, which will adapt its width --> 
    </tr> 
    <tr> 
     <td></td> <!-- an empty cell, which will adapt its width --> 
     <td width=250 height=300> <!-- it's like max-width:200px --> 
    <a href="SOME LINK"> 
      <img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" /> 
    </a> 
     </td> 
     <td></td> <!-- another empty cell, which will adapt its width --> 
    </tr> 
</table> 

Answer 1

Outlook is wonky。それは愚かなWordHTML経由でレンダリングします。

HTML属性で定義された値がないと、Outlookは実際の画像の全幅を100％と見なします（デスクトップの解像度が画像の解像度と異なる場合はさらに大きくなることがあります）。

<img width="640" height="240" src="SOME IMAGE LINK" style="width:100%; height:100%" /> 

は、あなただけの置き換え：

あなたの最善の策は、それはあなたのデスクトップのブレークポイントに到達すると100％に幅/高さを変更するために、または、さえwonkier何かを以下のようにするには、setメディアクエリのいずれかにあります640、240のプロパティを画像の高さと幅に合わせることができます。結論としては、大多数の電子メールクライアントが適切なフォールフォールを尊重し、CSSをHTML属性の上に置きますが、Outlookは100％CSSを無視して宣言されたHTML属性に基づいて動作します。

これは100％確実なメッセージではありませんので、広範にテストする必要があります。

あなたの最終的な解決策は、他に何も問題がなければ、元のイメージをOutlookで表示する最大サイズに実際にサイズ変更することです。