いままでコレクションバナーの画像は表示しておらず、コレクションリストに表示させるだけだったので正方形の画像を使用していました。
今回、コレクションバナーにも画像を表示することになったのですが、画像の比率が16:9なため正方形の画像では上下が切れてしまいます。
今までの正方形の画像をコレクションバナーでも表示をさせたいため、テーマのカスタムCSSで編集をしたいのですが、CSSがまだ得意ではないので修正方法を教えていただけないでしょうか。テーマはcraftです。
修正後のイメージ図
Topic summary
コレクションバナーに16:9の画像を表示する際、従来使用していた正方形画像では上下が切れてしまう問題が発生。
提案された解決策:
.collection-hero__image-containerとimg要素に対するCSSカスタマイズobject-fit: fill、height: autoなどのプロパティを使用- レスポンシブ対応のためメディアクエリも含む
結果:
- 提案されたCSSコードで問題が解決
- CSS自力対応が難しい場合は、パートナーへの依頼や別の方法の検討も推奨された
- 質問者はCSSの勉強を継続する意向を示した
アスペクト比を該当画像のものから変化させないということであれば、以下のような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セクションで独自構築/新規セクションの開発/など)
以上ですが、自力での対応が困難な場合はエキスパートやパートナーに依頼されることをお勧めします。
1 Like
Jizo_Inagaki 様
上記のCSSで対応することが出来ました。
この度は本当にありがとうございました。CSSの勉強は続けていこうと思います。
1 Like