背景视差图像不会调整大小

Question

我正在尝试创建一个有效的多图像视差，但图像无法在移动设备上正确显示，我已经尝试了所有方法。

这是该网站的网址：http://hollybrook.absolutehtml.co.uk/

这是 CSS 代码

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg- 
8 {
  position: relative;

 background-attachment: fixed;
 background-repeat: no-repeat;
 background-size:cover;
}



.bgimg-1 {
  background-image: url("../images/house.jpg");
    width: 100%;
    height: 100%;
    min-height: 650px;
}

.bgimg-2 {
  background-image: url("../images/inside.jpg");
  min-height:100vh;
}

.bgimg-3 {
  background-image: url("../images/canoe.jpg");
  min-height:100vh;
}

.bgimg-4 {
  background-image: url("../images/bedroom1.jpg");
  min-height:100vh;
}

.bgimg-5 {
  background-image: url("../images/bathroom.jpg");
  min-height:100vh;
}

.bgimg-6 {
  background-image: url("../images/bedroom2.jpg");
  min-height:100vh;
}

.bgimg-7 {
  background-image: url("../images/bathroom2.jpg");
  min-height:100vh;
}

.bgimg-8 {
  background-image: url("../images/shower.jpg");
  min-height:100vh;
}

这里是 HTML

<div class="colourbannergrey">
          <div class="container">
           <h4 class="card-title">Your Stay</h4>
                   <p class="card-text">Hollybrook House is nestled on the shores of Dunmanus Bay and the Sheepshead Peninsula in the beautiful southwestern corner of Ireland in the region of West Cork.<br>
<br>
 The area is best known for the Wild Atlantic Way defining routes for driving and cycling from West Cork all the way to Donegal through the wildest Atlantic coastal scenery "where land and sea collide"....

                       <a href="http://www.wildatlanticway.com/" alt="Wild Atlantic Way">Wild Atlantic Way </a> <br>
<br>
                  </p>



              </div>
      </div>
      <div class="bgimg-2">




  </div>
      <div class="colourbannergrey">
          <div class="container">
         <h4 class="card-title offset-xl-0 col-xl-12">Your Accomodation</h4>
                    <p class="offset-xl-0 col-xl-12">
A typically Irish modern bungalow provides cosy accomodation for guests who are looking for a quiet serene retreat in one of the most beautiful and peaceful areas of the country. The house sits in an acre of mature gardens with uninterrupted views over Dunmanus Bay and Mount Gabriel.<br>
<br>

Your hosts Roma and Freddy are looking forward to welcoming you. 

Email:hpsie@yahoo.ie  or call us +353(0)861601797</p>
      </div>
          </div>

我尝试过使用vh 和VW、%，无论我尝试什么，我都无法正确显示图像和调整大小。谁能解释一下为什么我无法在手机上显示图片。

Answer 1

你可以试试这个：

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg- 
8 {
    background-size:100% 100%;
}

删除上述类中的所有 css 并仅添加 background-size:100% 100%;它适用于桌面和移动视图的 css

Answer 2

把这条线放在所有img的样式中

background-size: cover;