6


0

オーバーフロー:非表示が電子メールで機能しない

私はいくつかの画像でいくつかのメールを送信しようとしています。 ウェブページに画像を表示する場合、画像は幅100x、高さ100pxですが、画像が100pxよりも高い場合、余分なピクセルが非表示になります。

電子メールで送信しようとすると、画像の高さを切り取ることができません。 +メールで送信する内容は次のとおりです。


4 Answer


8


試しているCSSがメールクライアントでサポートされていない可能性があります。 電子メールクライアントは通常、HTMLの大幅に削減されたサブセットと最小限のCSSのみをサポートします。 HTMLメールを作成するとき、多くの場合_back to basics _…​ HTMLテーブルレイアウトなど 最大限のサポートを得るために。

編集: HTML / CSSを使用して画像を_crop_しようとするIMOは、これを*すべて*の電子メールクライアントで機能させる場合は不可能になります。 これを達成するのに役立つ関連プロパティ:背景画像、高さ、オーバーフロー、クリップなど。 全面的にサポートされていないだけです。 そのため、一部では機能しますが、他では機能しません。

別の方法として、幅を縮小して、高さが常に100ピクセルになるようにすることもできます。 適切なアスペクト比を維持するには、サーバー側の幅を計算する必要があります。

しかし、私はそれが最良の解決策かもしれないと思うかもしれませんPHPでサーバー側(他の)正方形の100ピクセルの画像を生成することですか?


4


http://www.campaignmonitor.com/css/ [電子メールクライアントでのCSSサポートのガイド]ページを見て、さまざまな電子メールクライアントで使用できるCSS属性と使用できないCSS属性を確認してください。


3


これを機能させるには、正方形のオブジェクト(Divまたはテーブル)を作成し、その中に画像を背景画像として配置する必要があります。 画像をリンクにする必要がある場合は、その上に透明なgifを配置する必要があります。


1


Alan O’Rourkeの背景画像は、Outlook電子メールクライアントではサポートされていません。 また、背景画像を使用する場合は、GmailがインラインではないCSSをすべて削除するため、必ずインラインスタイルとして含めるようにしてください。