【问题标题】:Background Parallax image wont resize背景视差图像不会调整大小
【发布时间】:2018-08-02 07:16:18
【问题描述】:

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

这是该网站的网址: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>

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

【问题讨论】:

    标签: html css image-scaling


    【解决方案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

    【讨论】:

    • 我已经用上述更改更新了代码。它在移动设备上看起来更好,一些图像的比例略有错误,但已经完全杀死了桌面视图。
    • 添加背景位置:中心;背景尺寸:100% 100%;试试这个
    【解决方案2】:

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

    background-size: cover;
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-12-01
      • 1970-01-01
      • 2015-05-05
      • 2015-12-08
      • 2018-11-16
      • 1970-01-01
      • 2015-04-30
      • 2018-01-01
      相关资源
      最近更新 更多