web-dev-qa-db-ja.com

画像のサイズに関係なくHTMLメールで画像を応答させる方法

コンテナの最大幅が600pxのメールテンプレートを作成しています。幅800pxを超える画像と、意図したアスペクト比を維持するために縮小する画像をアップロードできるようにしたいと考えています。したがって、800px幅の画像をアップロードしても、600pxに拡大されます。

Outlookでは、それが画像の最大幅をサポートしているとは思われません。

これに対する解決策はありますか？

htmlcssemailoutlook
8
Raj Chudasama

はいといいえ。 Outlookは、CSSやHTMLのサイズに関係なく、画像を実際のサイズに強制する傾向があります。したがって、デスクトップバージョンに表示したい画像よりも大きい画像を使用すると、Outlookで機能しなくなる可能性があります。

レスポンシブ画像の最善の策は、max-widthが設定されたテーブル内に100％幅の画像を配置することです。次に、このテーブルの周りに、最大幅サイズで設定された幅テーブルを含むMSOの条件付きコードを作成します。

以下の例：

<!--[if gte MSO 9]>
<table width="640"><tr><td>
<![endif]-->
<table width="100%" style="max-width:640px;"><tr><td><img src="image.jpg" width="100%" /></td</tr></table>
<!--[if gte MSO 9]>
</td></tr></table>
<![endif]-->

すべてのクライアントでサポートされているわけではないため、max-widthの使用にはまだいくつかの癖があります。私は CSS互換性 を表示し、上記に加えて必要に応じて少し調整して、収まるようにします。次に、テストをテストし、さらにテストします。

11
Gortonington

1日の間、メールの画像の幅に頭を悩ませています。最後に、それを「レスポンシブ」な方法で機能させるようにしました。私が見つけたのは、一部の電子メールクライアントは<img>タグのCSS（少なくともwidthとmax-widthのCSS）を無視し、画像を全幅に設定することです。実際には、<img>に直接設定されたwidth属性を尊重します。これが私がしたことです：

<img class="logo" width="250" src="http://myweb.com/img/myimg.png" />

その後：

.logo {
    display: block;
    width: 310px !important;
    max-width: 100% !important;
}

CSSを尊重するクライアントは画像にCSSを使用しますが、CSSを無視するクライアントは幅が250pxに設定されるだけなので、画像が異なる画面サイズのレイアウトを壊すことはありません。

4
GTCrais

私はモバイル用のコンディショナルを使用し、divタグを含め、高さと幅のパーセンテージを定義して背景画像のURLを設定し、divタグで境界を定義しました。 imgタグよりもはるかに優れています。以下の条件は、モバイルブラウザー、Webメールなど、Outlook以外の電子メールクライアントでの画像の表示を処理します。画像データでも機能します。

Example:
   <!--[if !mso]> <!-->
    <div    
style="
    background-image:url(http://www.example.org/image.png); 
    background-repeat:no-repeat;
    background-size:100% 100%; 
    width:auto; height: 300px;
"> 
    </div>
   <!-<![endif]->
1
Demetre Phipps