画面が遷移したら、下の方に黒い線が表示されてしまうのをどうにかしたい

Question

imgの親要素のheightを変更しましたが、変わりませんでした。

該当のサイト
https://isiikadan.xyz/

<!-- fv swiper-->
    <div class="swiper-container">
      <p class="fv__inner">
        <span class="fv__inner__text1">頑張る人の</span><br>
        <span class="fv__inner__text2">頑張らない時間</span>
      </p>
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="slide-img">
            <img src="img/mainbg01.jpg" alt="スライダー画像1">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
            <img src="img/mainbg02.jpg" alt="スライダー画像2">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
            <img src="img/mainbg03.jpg" alt="スライダー画像3">
          </div>
        </div>
      </div>
    </div>
コード

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
  animation: zoomUp 10s linear 0s 1 normal both;
}
/* imgタグだと下に隙間ができるのでblockに。 */
.slide-img img {
  display: block;
}
コード

let swipeOption = {
    loop: true,
    effect: 'fade',
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
    speed: 1000,
  }
  new Swiper('.swiper-container', swipeOption);
コード

Comments

[Lhankor_Mhy]

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7
https://teratail.com/help/question-tips#questionTips3-5-1

[退会済みユーザー]

ありがとうございます。
マークダウンを使って見やすくなりました。

[Ta-tun]

スライイドショーしている画像のサイズを統一したらどうなりますか？
画像のサイズを見ていると座敷の画像の縦の長さが足りなくて、黒い余白が表示されているように見えます。

[退会済みユーザー]

画像サイズを確認していただきありがとうございます。
今、3枚とも画像の縦の長さを統一しましたが、変わらずです。

Answer 1

これだけでいいような気がするのですが、何か意図はありますか？

.swiper-slide-active .slide-img/*, 
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img */ {

Comments

[退会済みユーザー]

はい、ズームインしてから次の画像へ遷移するようにしてあるんです。。。

[Lhankor_Mhy]

ズームインしてから次の画像に遷移、ということであれば、回答のとおりでいいような気がします。
詳しく説明いただけますか？

[退会済みユーザー]

おっしゃる通り、下の2行を削除したら、解決しました。
先ほども同じことをやってみたのですが、ちゃんと消せてなかったみたいです！

自分はググってもわからなかったのに、Lhankor_Mhyさんはすごいですね＾＾

[Lhankor_Mhy]

お役に立てたようで何よりです。