商品画像を 1：1 で表示させたい。

[Bacchus]

Colorblockというテーマを使用しています。

こちらのテーマですと商品一覧で見たときに、サムネイル画像が縦長に表示されます。

商品画像は全て正方形で作成しているため、長方形で表示された時に両端の画像が不自然に切り取られてしまい困っています。

どうしたらサムネイル画像の縦横の比率を変更できるでしょうか？

 

[株式会社フルバランス · Accepted solution]

Bacchus様

ご質問を確認いたしました。

Colorblockというテーマをプレビューにて確認したところ、

商品画像が縦横5:4の比率で表示されていることがわかりました。

実際にコード編集はしていないですが、cssを確認したところ、

以下コードをcssファイルに追記することで比率を1:1にできるかと存じます。

.card__inner.gradient.ratio {
  --ratio-percent: 100%!important;
}

ご参考までに。

[Bacchus]

ありがとうございます。

商品画像がキッチリ正方形になりました！