注文完了メールで表示される画像のサイズを調整したい

注文完了メールでスマホによって

表示されている画像のサイズが横にギュッと縮んでしまうのですが、

ディスプレイサイズに合わせて調整できるように変更できるでしょうか?

現状は下記のコードです。

{% if line.line_item.image %}

{% endif %}

よろしくお願いいたします。

ご質問いただいています、画像のサイズの横幅が縮んでしまう件ですが、

メールテンプレート全体が確認できないので、推測になってしまいますが、

CSSで画像サイズが調整されているのではないかと思われますので、

下記CSSを追加いただければ改善するかもしれません。

Shopifyのデフォルト設定前提で説明させていただきます。

メールテンプレートから下記コードを探していただき、


下記に変更ください。


width、heightの80px部分が画像のサイズとなりますので、ご希望のサイズにご調整ください。

ご参考まで。

(キュー小坂)

@Qcoltd

ご回答ありがとうございます。

試したのですが、iPhone8の画面ではやはり潰れてしまいました…

添付画像①のような様子です。

『object-fit: cover;』を試すと

添付画像②のように拡大された状態に。

『object-fit: contain;』を試すと

添付画像③のように余白が多すぎる状態になりました。

iPhoneが古いせいで入る幅が少ないからでしょうか…?

iPhone11などではちゃんと正方形に見えます。