注文完了メールでスマホによって
表示されている画像のサイズが横にギュッと縮んでしまうのですが、
ディスプレイサイズに合わせて調整できるように変更できるでしょうか？
現状は下記のコードです。
{% if line.line_item.image %}
{% endif %}
よろしくお願いいたします。
Topic summary
注文完了メールに表示される商品画像が、スマートフォン（特にiPhone8）で横に縮んで表示される問題についての相談です。
現状の問題:
- 画像が横方向に圧縮されて表示される
- 現在のコードでは width=“60” height=“60” が指定されている
提案された解決策:
Qcoltdから、CSSで画像サイズを調整する方法が提案されました:
widthとheightを 80px に変更- メールテンプレート内の該当コードを探して修正
試行結果:
質問者が複数のCSS設定を試したものの、まだ解決していない状況:
object-fit: cover;→ 画像が拡大されすぎるobject-fit: contain;→ 余白が多すぎる- iPhone11では正方形に見えるが、古いiPhoneでは幅が狭い可能性を懸念
添付画像で具体的な表示状態が共有されており、引き続き調整方法を模索中です。
ご質問いただいています、画像のサイズの横幅が縮んでしまう件ですが、
メールテンプレート全体が確認できないので、推測になってしまいますが、
CSSで画像サイズが調整されているのではないかと思われますので、
下記CSSを追加いただければ改善するかもしれません。
Shopifyのデフォルト設定前提で説明させていただきます。
メールテンプレートから下記コードを探していただき、
下記に変更ください。
width、heightの80px部分が画像のサイズとなりますので、ご希望のサイズにご調整ください。
ご参考まで。
(キュー小坂)
ご回答ありがとうございます。
試したのですが、iPhone8の画面ではやはり潰れてしまいました…
添付画像①のような様子です。
『object-fit: cover;』を試すと
添付画像②のように拡大された状態に。
『object-fit: contain;』を試すと
添付画像③のように余白が多すぎる状態になりました。
iPhoneが古いせいで入る幅が少ないからでしょうか…？
iPhone11などではちゃんと正方形に見えます。