ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」
ワードプレステーマ別

TCDテーマVENUS:スライダー画像の比率を維持したまま表示させる方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.質問内容

・スマホ時に左右が見切れる現象をなくしたいです。
・スライダーの高さが固定の現象を変更したいです。
・テキスト入りの画像が、切り取られずに全て閲覧できるようにしたいです。

▼変更箇所イメージ
変更箇所イメージ

A.TCDテーマ>基本設定>カスタムCSSに以下を入力してください。

.index_slider,.index_slider li{
    height: unset!important;
    aspect-ratio: 1250 / 580;
}

.index_slider .image{
    width: 100%;
    height: 100%;
}

.index_slider img{
    height: 100% !important;
    aspect-ratio: 1250 / 580; /** 表示させたい画像の比率を入力してください。 **/
    object-fit: contain;
}

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

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事