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

日本語 ディスカッション 技術的なQ＆A

Topic summary

Colorblockテーマの商品一覧でサムネイルが縦長（5:4）になり、正方形で用意した商品画像が左右で不自然に切れる問題。

最新の対応・提案:

  • テーマのCSSに「.card__inner.gradient.ratio { --ratio-percent: 100% !important; }」を追記し、表示比率を1:1へ変更。

技術補足:

  • ratio-percent は画像コンテナのアスペクト比を制御するCSSカスタムプロパティ。
  • 100%に設定すると縦横同割合となり、正方形表示になる。

結果・確認:

  • 提案のCSS追加によりサムネイルが「きっちり正方形」に修正されたことが報告された。

現状:

  • 問題は解決済み。追加の作業や未解決点はなし。
  • 中心となる情報はCSSコードの追記。
Summarized with AI on January 28. AI used: gpt-5.
1

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

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

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

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

2023-04-11 123139.png
2023-04-11 123139.png889×528 185 KB

2

Bacchus様

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

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

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

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

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

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

ご参考までに。

1 Like
3

ありがとうございます。

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

1 Like