スマホで画像が縦に伸びる・横につぶれる場合の対処方法を教えてください。 – makeshop よくある質問

スマホで画像が縦に伸びる、または横につぶれて表示される場合、画像のHTMLやCSSに幅・高さ（width / height）のサイズが直接指定されていることが原因です。

商品説明のHTML内で、画像にたいしてサイズが直接記述されていないかを確認してください。

＜例＞

<img src="[画像のURL]" alt="" style="width: 100px; height: 200px;">

または

<img src="[画像のURL]" alt="" width="100" height="200">

など

このような記述がある場合は、サイズを指定している記述の部分「style="width: 〇〇; height: 〇〇;"」または「width="〇〇" height="〇〇」"」を削除してください。

すでに商品を多数登録しているなどの理由で商品説明の修正が難しい場合は、CSSで一括指定も可能です。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」の末尾に以下を追記し、保存してください。

＜例＞

.〇〇 img {
   max-width: 100% !important;
   height: auto !important;
}

※「〇〇」の部分には、対象の画像が含まれている要素のクラス名を記述してください。

■makeshopサポート：CSSの指定が効かない！？考えられる原因6つ
https://www.support.makeshop.jp/design/?p=391

関連記事