異なる大きさでアップロードされた商品画像を、表示時には同じ領域に収めたいという要望。CSSのobject-fit: containを適用したいが構造上効かず、Liquid編集で対応できるかを質問。テーマはShopify標準のDawn。
回答はコード編集には触れず、テーマエディターでの設定を案内。完全に同じ大きさで固定はできないが、高さを揃えることは可能。
この設定により、デバイスや画面サイズに合わせて画像・動画の高さが統一され、スクロールのばらつきが軽減。完全な同一サイズ表示は不可。追加の支援はサポートページから相談可。
Liquidやobject-fitでの実装可否については未解決で、テーマ設定による回避策の提示にとどまる。
商品画像としてアップロードした画像の大きさが違う場合、ユーザが見える画面での表示がばらけてしまいます
これでは次の画像を見るときにスクロールしなければならないので、大きさの異なる商品画像をアップロードしても表示される画像領域を変動させたくないです
これはliquidファイルを編集することで表現できますか？
画像自体は変えずに配置だけCSSの object-fit: contain;が適用できれば良さそうだと思ったのですが、ただ構造的に単純に当てるだけだと効きませんでした
なおテーマはshopify標準のDawnをカスタマイズする形で利用しています
ご質問ありがとうございます。
Liquid含むコード編集については回答ができませんが、テーマエディターで可能な設定について回答いたします。画像の大きさが異なっていても、同じ大きさで表示するという設定はできませんが、高さを揃えることはできます。
テーマエディターで商品テンプレートを開き、「商品情報」セクションをクリックします。メディアの「メディアを画面の高さに制限する」にチェックを入れます。こうすることで、どのようなデバイスや画面サイズであっても、その画面の高さに併せて商品画像や動画が表示されます。
メディアのその他の設定項目も最適なものに変更いただいた上で、理想的な表示に設定できるかご確認ください。
上記設定についてサポートが必要な場合は、弊社サポートページよりログインの上お問い合わせください。