Q.商品一覧ページで商品画像が正方形にトリミングされて表示されるのですが、縦に長い画像に変更したいです。
A.下記にてご対応ください。
- 出力される画像サイズを調整する
- CSSを調整する
1. 出力される画像サイズを調整する
テーマ仕様では、商品画像は「横：500px 縦：500px」の大きさでトリミング処理されます。以下の箇所をカスタマイズしてこのトリミング処理を外し、設定した商品画像（メイン画像）がそのままのサイズで表示されるようにします。
編集するファイル： item-category.php
編集する箇所： 47行目付近
usces_the_itemImage( 0, 500, 500 );
↓
usces_the_itemImage( 0, 'return' );
参考記事）
Welcart usces_the_itemImage / 表示系関数
注意点商品画像が大きすぎる場合、画像の読み込み時に時間がかかってしまいます。ほどよいサイズの画像を設定しましょう。参考値として、ICONICデモサイトでは「横：740px 縦：540px」の商品画像をセットしています。
商品画像そのままのサイズではなく、別のサイズで読み込みたい場合は（単に数値を変更するのではなく）別途カスタマイズが必要です。
商品画像そのままのサイズではなく、別のサイズで読み込みたい場合は（単に数値を変更するのではなく）別途カスタマイズが必要です。
2. CSSを調整する
TCDテーマ＞基本設定のカスタムCSSに下記を入力して下さい。
.p-item-archive__item-thumbnail img { object-fit: contain; }
▼変更後イメージ
横長・縦長の商品画像もトリミングされずに表示されます。
見た目をよくするには、画像の縦横比は揃えるようにしてください。
なお、IEではこのofject-fitプロパティに対応していないので、カスタムCSSの内容は反映されません。
（テーマ仕様では、JavaScriptによって他ブラウザと同表示になるよう調整しています。）
この記事は役に立ちましたか？
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます！