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

Question

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

以下是网站的 URL：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;

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

Background Parallax image wont resize

html

css

image-scaling