Welcart Nova 商品画像一覧のサイズ変更

[ZJ-kame]

——————————————-
WordPress のバージョン：5.5.1
Welcart のバージョン：1.9.36
PHP のバージョン：7.4
Welcart専用の拡張プラグインとバージョン：SKU Select 1.1.10
ご利用のテーマ：Welcart Nova
症状を確認したブラウザ：
サーバー：heteml
SSLの利用：常時SSL
——————————————–

お世話になります。
Welcart Novaのトップページ、及びカテゴリーページの商品一覧画像の表示サイズは、デフォルトですと縦長の画像が並びますが、これを正方形に変更するにはどのようにすればよろしいでしょうか。

事前にPhotoshopで調整せずに画像を登録すると、横は100%で統一されますが縦はautoのためバラバラです。
見た目がガタガタになるので現在は1点1点トリミングして作った画像をアップしていますが、目標は異なる縦横比の商品写真を登録した際に、300×300の正方形の中に納めて並べたいです。
縦横比が異なる写真は、はみ出す部分は表示される時にトリミングされるのが理想です。

色々調べて試しましたが上手くいかず、またPHPに不慣れなため、実現方法をご教示いただけますと幸いです。

[sagawa]

こんにちは。

CSSのみで、正方形の画像にして表示することができます。
詳しくレクチャーをすることはできませんが、before擬似クラスとpadding-top:100%を使う方法でご希望の反映がされるかと思います。
上記のキーワードや「アスペクト比固定」などで調べていただくと情報が出てくるかと思います。

[投稿者]

投稿