メールのワイド画像に水平スクロールバーを適用する

Question

現在、送信メールに画像の視覚化を生成しています。私はhereから読み取った550 - 600ピクセルの電子メールの幅の標準に準拠しています。私はテーブルである可視化をいくつか持っていますが、特定の時間には10以上の列を持つことができます。すべてを表示したい場合、600ピクセルを超えて拡張する必要があります。

私は600ピクセル幅を尊重したいと思っていました。たとえば、1200ピクセルイメージを持つことが可能かどうかは疑問でしたが、イメージが水平スクロールバーを持つ600ピクセル幅に含まれています。 600幅のルールを使用できますが、横方向にスクロールして幅全体を表示することもできます。

は、私は本当にあまりにも多くのコードを持っていないが、これは私が持つ幅ハードコーディング私の電子メール内で使用されるインラインスタイルです：overflowプロパティを追加

style="position: relative; height: 600px; width: 600px;" 

Answer 1

を

style="position: relative; height: 600px; width: 600px;overflow-x:scroll" 

イメージの幅が600ピクセルより大きい場合にのみ水平スクロールバーを表示する必要がある場合は、overflow-xプロパティをautoに設定します。 水平スクロールバーと垂直スクロールバーの両方が必要な場合は、overflowプロパティを使用します。

Answer 2

overflow CSSプロパティis not great in email clientsのサポート。あなたのリストにiOS、Apple Mail、およびwebmailのメンバーがたくさんいる場合は、<table>を包む<div>のoverflowプロパティを使用して逃げることができます。

<div style="overflow-x: auto;"> 
    <table> 
     <!-- Your data --> 
    </table> 
</div> 

これは、Outlook、Androidなどでは機能しません。

---

別のオプション：あなたは、ブラウザでのフル解像度バージョンへリンクことを電子メールで縮小画像を表示することができますか？

<a href="link-to-full-res.png"> 
    <img src="" width="600" height="" alt="alt_text" border="0" style="width: 100%; max-width: 600px; height: auto;"> 
</a> 

画像はメールで100％判読できないかもしれませんが、レイアウトは壊れず、経験は良いはずです。