【HTMLエディター】画像が縦伸びする

【HTMLエディター】画像が縦伸びする

HTMLエディターで画像を設定した際に、画像が縦に長くなってしまう(縦に伸びる・縦伸び)ような現象が発生してしまった場合の対応方法について説明していきます。

HTMLエディタでの対応方法

  1. 変更したい画像をクリックし、「属性 > Height」のにある「×」を押す。
    (or 数字を全て消す or 「auto」と入力する)


  2. 下図のように「Height」の部分が「auto」になっていればok。

ソース編集での対応方法

  1. <img alt="サンプル画像" src="https://sample.com/sample.png" width="600" height="200" style="max-width: 100%; height: 200px; width: 600px;">
例えば上記のようなソースになっている場合、下記2点を修正してください。
  1. heightを数値で指定せずauto指定にする。
    スマートフォンで見た時にwidthは縮まるけどheightは縮まらないため、画像が縦伸びしてしまいます。
  2. style内の指定は、widthを%指定、max-widthをpx指定にする。
    Gmailアプリではmax-widthが効かないため、widthでパーセント指定しないとスマホで見た場合に画像が大きくなって崩れてしまいます。
    (※ただし、上記対応をした場合でも、Outlook,Becky!の場合はCSSが効かないため、画像自体のサイズをリサイズしていただいた方が良いです。)
修正後のソースのサンプルは下記です。
  1. <img alt="サンプル画像" src="https://sample.com/sample.png" width="600" style="width: 100%; height: auto; max-width: 600px;">

発生している原因

スマートフォンの場合、画面幅が360~400px程度になります。
このとき画像幅(width)ははみ出さないように縮みますが、高さ(height)が固定で指定されている場合には、高さはそのままとなるため、
結果として縦に長くなってしまいます。

そのため、height:autoを指定して、高さは自動で調節するようにすることで対応できます。

    • Related Articles

    • 【HTMLエディター】スマホで見たときにテキスト・文字が小さくなる

      HTMLエディターで作成したメールの文字が、スマホで見ると小さくなってしまう場合に解決するための方法を紹介していきます。 なぜこのような事象が発生するのか？ 画像がある場合にサイズ指定がなされていない場合に元のサイズのまま画像を表示しようとすることが原因で、相対的に文字が小さくなってしまいます。 スマホのGmailアプリやOutlookメールアプリで確認した際に、比較的発生しやすい現象です。 ...

    • 【HTMLエディター】iPhoneで見ると左と上に灰色の謎の背景がある

      HTMLエディターで作成したメールをiPhoneのデフォルトメールアプリで確認したときに、下図のようにメールの左側と上の途中までが灰色になってしまう場合があります。 (現状『iPhone×デフォルトメールアプリ[青いアイコンの物]』の条件下でのみ確認していますが、この条件以外でもし見つけましたら教えて頂けますと幸いです。) この記事では、このような現象が発生した場合の対応方法について記載していきます。 原因 原稿の幅がスマホの幅を越えていることが原因です。 対応方法 1. ...

    • 【HTMLエディター】HTMLで作成したメールをHTMLエディターで編集したい

      方法1. HTML入稿（ソース）で入稿して切り替える 下記のようにHTML入稿を行っている場合、「入稿方法 > HTMLメールエディタ(β)」を選択して頂くことで、エディタに切り替わります。 方法2. HTMLメールエディタ(β)でインポートする はじめからHTMLメールエディタ(β)モードで開き、上部リボンの「インポート(↓)」ボタンを押下して頂くと、インポート用のモーダルウィンドウが表示されます。 ...

    • 【HTMLエディター】画像が表示されない

      拡張子の確認 画像の拡張子として下記以外のもの(例：.webp, .svg, .tif等)を使用している場合、使用しているメールアプリ(Gmail,Outlook等)によっては画像が表示されません。 下記の形式の画像を使用するようにしてください。 .png .jpg (.jpeg) より詳しく知りたい方は下記記事をご覧ください。 【メール設定】webpやsvgは使用して良いの？メールに使用して良い画像の拡張子は？ Gmailの場合 ...

    • 【HTMLエディター】テキストを挿入・編集したい

      テキストの追加 下記手順にテキストを追加して下さい。 上側リボンにある追加ボタン[+]を押す。 右側メニューにある[テキスト]を挿入したい場所にドラッグする。 ダブルクリックしてテキストを書き換える。 [テキスト設定]や[装飾]から文字色などを変更できます。(詳細は記事下部のテキストの変更で解説しています。) テキストの編集 編集したいテキストをダブルクリックすることで、文字列を編集できます。 ...