移动电话上的视差部分被缩放

时间:2017-03-24 11:46:44

标签: html css mobile parallax

我已经有一段时间试图修复它但没办法。 我正在开发一个网站,实际上它可以在各个方面调整自己,除了移动版本,其中由3个图像形成的视差部分真的被缩放。

here a little example how it is on mobile phone

有关如何修复它的任何建议?我留下部分代码和the working website here

的CSS:

        .parallax-section {
      background-attachment: fixed ;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
     }
@media only screen and (max-width: 767px) {
    .parallax-section {
        background-position: center top !important;
        background-attachment: scroll !important;

    }
    @media (min-width: 768px) and (max-width: 979px) {
    .parallax-section {
        background-position: center top !important;
        background-attachment: scroll !important;

    }

#home .bg-img {
    padding: 200px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    top: -200px;
    left: -200px;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center center;
}

HTML:

<section id="home">

            <div id="slitSlider" class="sl-slider-wrapper">
                <div class="sl-slider">

                    <!-- single slide item -->
                    <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                        <div class="sl-slide-inner">
                            <div class="bg-img bg-img-1 heading animated fadeInRight"></div>
                        <div class="carousel-caption">
                        </div>
                        </div>
                    </div>
                    <!-- /single slide item -->
                </div><!-- /sl-slider -->

                <nav id="nav-arrows" class="nav-arrows">
                    <span class="nav-arrow-prev">Previous</span>
                    <span class="nav-arrow-next">Next</span>
                </nav>

                <nav id="nav-dots" class="nav-dots">
                    <span class="nav-dot-current"></span>
                    <span></span>
                    <span></span>
                </nav>

            </div><!-- /slider-wrapper -->
        </section>

0 个答案:

没有答案