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;

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

2 个答案: