[解決済み] モバイル端末でCSSを使用したフルハイトの背景画像

質問

携帯電話用のメディアクエリを設定しようとしています。

全幅の画像& 高さ100vhの画像があるのですが、スマホで見ると、上に画像があって下に画像がないのです。

横幅を小さくしたときに、画像が高さ一杯に移動するようにしたい。

私はHTMLの経験があまりなく、独学で勉強しているので、何か手助けをお願いします。

今まで試したのはこんな感じです。

height: 100%
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

これが私の全コードです。

<div class="container-fluid">
    <div class="container">
        <div class="row padding-custom">
          <div class="col-md-3 mt-4 mb-4">
            <div class="card card-1">
              <img
                class="card-img-top"
                src="../../../assets/images/natours.png"
                alt="Card image cap"
              />
              <div class="card-body">
                <h5 class="card-title"><strong>Natours</strong></h5>
                <p class="card-text">
                  A Responsive, Single Page Website Template using SASS pre-processor.
                </p>
                <div class="row pl-3 mb-2">
                  <a href="#" target="_blank" class="card-link">View Project &rarr;</a>
                </div>

                <span class="badge badge-primary">HTML5 / CSS3</span>
                <span class="badge badge-info ml-2">Responsive</span>
              </div>
            </div>
          </div>
          <div class="col-md-3 mt-4 mb-4">
            <div class="card card-2">
              <img
                class="card-img-top"
                src="../../../assets/images/emp_mgmt.png"
                alt="Card image cap"
              />

              <div class="card-body">
                <h5 class="card-title"><strong>Employee Management</strong></h5>
                <p class="card-text">
                  A CRUD application using Firebase Authentication & Cloud Firestore.
                </p>
                <div class="row pl-3 mb-2">
                  <a href="#" target="_blank" class="card-link">View Project &rarr;</a>
                </div>

                <span class="badge badge-danger">Angular 7</span>
                <span class="badge badge-purple ml-2">Bootstrap 4</span>
              </div>
            </div>
          </div>
          <div class="col-md-3 mt-4 mb-4">
            <div class="card card-3">
              <img
                class="card-img-top"
                src="../../../assets/images/pigdice.png"
                alt="Card image cap"
              />
              <div class="card-body">
                <h5 class="card-title"><strong>Pig Dice Game</strong></h5>
                <p class="card-text">
                  An in-browser clone of the classic Pig Dice Game for two players.
                </p>
                <div class="row pl-3 mb-2">
                  <a href="#" target="_blank" class="card-link">View Project &rarr;</a>
                </div>

                <span class="badge badge-warning">JavaScript</span>
                <span class="badge badge-primary ml-2">HTML5 / CSS3</span>
              </div>
            </div>
          </div>
          <div class="col-md-3 mt-4 mb-4">
            <div class="card card-4">
              <img
                class="card-img-top"
                src="../../../assets/images/linux.png"
                alt="Card image cap"
              />
              <div class="card-body">
                <h5 class="card-title">
                  <strong>Linux Server Configuration</strong>
                </h5>
                <p class="card-text">
                  Configure & deploy a Flask Web Application
                </p>
                <div class="row pl-3 mb-2">
                  <a href="#" target="_blank" class="card-link">View Project &rarr;</a>
                </div>

                <span class="badge badge-secondary">Amazon Lightsail</span>
                <span class="badge badge-dark ml-2">Apache Server</span>
              </div>
            </div>
          </div>
        </div>
        <div class="cta text-center">
            <a href="#" target="_blank" class="btn btn-outline-light mt-3 text-center"
            >See More Projects</a>
        </div>

      </div>

</div>

CSSです。

    .container-fluid {
  background-image: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("../../img/project-bg.jpeg");
  height: 100vh;
  background-size: cover;

}

.badge-purple {
  background-color: #563C7C;
  color: #fff;
}
 .padding-custom {
   padding-top: 10rem;
 }

.card {
  transition: all 0.2s;
}

.card:hover {
  transform: scale(1.1);
}
.card-img-top {
  height: 8rem;
}

.card-1 {
  animation: zoomIn 0.5s ease-in backwards;
}

.card-2 {
  animation: zoomIn 0.5s ease-in backwards;
  animation-delay: 0.5s;
}

.card-3 {
  animation: zoomIn 0.5s ease-in backwards;
  animation-delay: 1s;
}

.card-4 {
  animation: zoomIn 0.5s ease-in backwards;
  animation-delay: 1.5s;
}

.cta {
  animation: zoomIn 0.5s ease-in backwards;
  animation-delay: 2s;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@media only screen and (max-width: 600px) {
  .container-fluid {
    height: 100vh;
    background-size: 100%;
  }
  .padding-custom{
    padding-top: 5rem;
  }

  .cta {
    margin-bottom: 4rem;
  }

  .card {
    margin: 0 2rem;
  }
}

ご協力ありがとうございました。

解決方法は？

削除する height:100% を維持し background-size: cover; を実行すると、現在の問題が解決します。