# 同じ商品の商品画像毎の大きさが違っても同じ大きさで表示させたい **URL:** \ **Category:** 技術的なQ＆A\ **Tags:** css, html\ **Created:** [January 5, 2024, 1:53am UTC](https://community.shopify.com/t/topic/282242 "2024-01-05T01:53:03Z")\ **Posts on this page:** 2\ **Page:** 1 ## AI-generated summary 異なる大きさでアップロードされた商品画像を、表示時には同じ領域に収めたいという要望。CSSのobject-fit: containを適用したいが構造上効かず、Liquid編集で対応できるかを質問。テーマはShopify標準のDawn。 回答はコード編集には触れず、テーマエディターでの設定を案内。完全に同じ大きさで固定はできないが、高さを揃えることは可能。 - 商品テンプレートの「商品情報」セクションを開く - メディア設定で「メディアを画面の高さに制限する」にチェック - ほかのメディア設定も最適化 この設定により、デバイスや画面サイズに合わせて画像・動画の高さが統一され、スクロールのばらつきが軽減。完全な同一サイズ表示は不可。追加の支援はサポートページから相談可。 Liquidやobject-fitでの実装可否については未解決で、テーマ設定による回避策の提示にとどまる。
**Author:** ![torano](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@torano](https://community.shopify.com/u/torano)\ **Post date:** [January 5, 2024, 1:53am UTC](https://community.shopify.com/t/topic/282242/1 "2024-01-05T01:53:03Z")
商品画像としてアップロードした画像の大きさが違う場合、ユーザが見える画面での表示がばらけてしまいます これでは次の画像を見るときにスクロールしなければならないので、大きさの異なる商品画像をアップロードしても表示される画像領域を変動させたくないです これはliquidファイルを編集することで表現できますか？ 画像自体は変えずに配置だけCSSの object-fit: contain;が適用できれば良さそうだと思ったのですが、ただ構造的に単純に当てるだけだと効きませんでした なおテーマはshopify標準のDawnをカスタマイズする形で利用しています ---
**Author:** ![Minami\_2](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@Minami\_2](https://community.shopify.com/u/Minami_2)\ **Post date:** [January 15, 2024, 1:49pm UTC](https://community.shopify.com/t/topic/282242/2 "2024-01-15T13:49:58Z")
ご質問ありがとうございます。 Liquid含むコード編集については回答ができませんが、テーマエディターで可能な設定について回答いたします。画像の大きさが異なっていても、同じ大きさで表示するという設定はできませんが、高さを揃えることはできます。 テーマエディターで商品テンプレートを開き、「商品情報」セクションをクリックします。メディアの「 **メディアを画面の高さに制限する** 」にチェックを入れます。こうすることで、どのようなデバイスや画面サイズであっても、その画面の高さに併せて商品画像や動画が表示されます。 メディアのその他の設定項目も最適なものに変更いただいた上で、理想的な表示に設定できるかご確認ください。 上記設定についてサポートが必要な場合は、[弊社サポートページ](https://help.shopify.com/ja/questions#/login)よりログインの上お問い合わせください。