画像の表示サイズについて

[Matsunokisan]

Shopifyのテーマにてカタログを選択すると商品一覧が表示されるのですがすべての商品が画像のサイズがそれぞれ異なっており非常に見栄えが良くないのですが、画像の表示サイズを手間をかけずに自動でそろえる方法は無いのでしょうか？例えば、商品が自動で四角の中に納まるようにするなど・・。

宜しくお願いいたします。

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

1.cssなどを調整して縦横サイズが違っても想定の表示になる様に調整する

→知見がない場合、Shopify Partnerなどにご依頼をされると良いかと思います

2.もとの画像の状態で余白をつけてサイズを揃える

余白をつけることで、縦横比が違う画像でも同じ比率で上げる形です。こちらは画像加工のみで対応可能ですので、

比較的実現しやすいと思います

[mk777]

お使いのテーマが分からないのですが、assetsの中のcustom.cssの中で、下記のクラス名を探してみてください。

grid-view-item__link grid-view-item__image-container full-width-link

横方向のみサイズを指定していると思います。

これを縦方向のみのサイズ指定に、変えてみてください。

width:300px;

を

height:700x;

のような感じで、書き換えると良いです。

横方向のみ指定では、縦が見切れてしまうことがあります。

縦を指定した方が、収まりが良いと思います。

chromやfirfoxの開発者ツールを使って、画像を右クリックして表示されるメニューで、調査や要素を調べるのような項目を選択すると、HTMLやCSS を確認できます。

お使いのテーマのクラス名を確認して、試してみてください。

こうした操作が不慣れ場場合は、カスタマイズの相談に応じている方に、ご相談されると良いと思います。