コレクションバナーの画像の表示サイズを固定したい

[うつろい工房]

いままでコレクションバナーの画像は表示しておらず、コレクションリストに表示させるだけだったので正方形の画像を使用していました。

今回、コレクションバナーにも画像を表示することになったのですが、画像の比率が16:9なため正方形の画像では上下が切れてしまいます。

今までの正方形の画像をコレクションバナーでも表示をさせたいため、テーマのカスタムCSSで編集をしたいのですが、CSSがまだ得意ではないので修正方法を教えていただけないでしょうか。テーマはcraftです。

修正後のイメージ図

[Jizo_Inagaki · Accepted solution]

アスペクト比を該当画像のものから変化させないということであれば、以下のようなCSSである程度は対応できるかなと思います。

.collection-hero__image-container {
  border: none;
}
.collection-hero__image-container img {
  position: static;
  object-fit: fill;
  height: auto;
}
@media screen and (max-width: 749px) {
  .collection-hero__image-container {
    height: auto;
  }
}

記載したCSSは一例なので、不足している部分は以下のようなドキュメントを読んだり実際に色々書いて勉強されることをお勧めします。

https://developer.mozilla.org/ja/docs/Web/CSS/Reference

CSSのみでの対応が難しい場合は、別の方法を探すなどを必要に応じて検討ください。

(カスタムliquidセクションで独自構築/新規セクションの開発/など)

以上ですが、自力での対応が困難な場合はエキスパートやパートナーに依頼されることをお勧めします。

[うつろい工房]

Jizo_Inagaki 様

上記のCSSで対応することが出来ました。

この度は本当にありがとうございました。CSSの勉強は続けていこうと思います。