在移动设备上使用CSS的全高背景图像

Question

我正在尝试设置电话的媒体查询。

我有一个全宽图像& 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;
  }
}

感谢您的帮助！

Answer 1

移除height:100%并保留background-size: cover;将解决当前问题。

Answer 2

添加下面的属性，它将成为固定的背景图像。

    background-position: center;
    background-attachment: fixed;
    min-height: 100vh; 

Answer 3

添加下面的属性，它将帮助您

background-size: 100%;
height: 100vh;