カルーセルパーツの画像の高さを揃えることはできますか

コマースクリエイターご利用店舗様専用の記事です

カルーセルパーツで高さの異なる画像を登録した場合、高さの低い画像(下記の例では緑の画像)下部に空白ができてしまいます。

元画像をリサイズせずに高さを揃えるには、CSSを利用します。


commerce creator>テーマ>利用中テーマのオリジナルCSS にて、以下CSSを追記してください。

/*カルーセルパーツの高さを揃えるCSS*/
.fs-pt-carousel--fitImage .fs-pt-carousel__slide img {
    height: 高さpx;
    width: auto;
}

高さにはカルーセルパーツに登録している画像の中で、一番高さが低い画像のpx数を設定ください。

上記の例ですと、500×100(緑)の画像が一番低いため、height: 100px;と指定します。

横幅は、高さに合わせて縮小されます。

この記事は役に立ちましたか?