【初心者】ワードプレスのスライダー画像の高さ調整をしたい

Q&A

ワードプレスでホームページを作成しています。

スライダー画像が現状画面幅の下よりはみ出しています。

headerとsriderで画面幅ぴったりに合わせたいので解決方法を教えて下さい。

スライダー画像がデフォルトで画面より下側にはみ出ている

(ワードプレステーマはライトニングでプラグインのスライダーを入れています。)

ここに問題・エラーに対して試したことを記載してください。

・小さい画像を用意した。→逆に画面高さより小さくなりすぎて調整が上手くいかない。

・imgについていたheigth100%wを解除した。→適切なプロパティ見つけられない。

よろしくお願いします。

1Answer

細かい仕様が不明なためざっくりとなりますが、

1.まず描画範囲の高さからheaderの高さを引いた値を.slide（もしくは.slideを囲う要素）に指定します

css

.slide {
  height: calc(100vh - ○○px);
}

2.また、上記の子要素（img以外）に対してブロック要素（インライン要素指定でなければOK）指定と高さ100%を指定します

css

.slide *:not(img) {
  display: block;
  height: 100%;
}

3.必要であればobject-fitでcoverやcontainを指定してもいいかもしれません

css

.slide *:not(img) {
  object-fit: cover;
}

1Like

@m100010eguchi
Questioner
@southkey47様
「height: calc(100vh - ○○px);」で解決できました。
初心者の質問にお付き合い頂き本当にありがとうございました。

Are you sure you want to delete the question?