Question

似乎引导卡正在影响我已固定在移动浏览器上的body标签上的图像大小。想法是固定图像，并在顶部滑动div。在桌面上可以正常工作。

已经将我的代码简化到了令人反感的行，但无法弄清楚为什么卡片的内容会影响人体背景图像的大小！？！？


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

        <title>Luxury Places - Mobile Test</title>
        <style>

            body {    
                background-image: url("img/pic1.jpg");
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: center center;
                background-color:#464646;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            .logo{
              width: 650px;
            }


            .custom-center {
                margin: auto;
            }


            nav{
                background-color: #EDEAF3;
            }

            .vh-center {
              margin: 0;
              position: absolute;
              top: 50%;
              left: 50%;
              -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
            }


            .section-nosize{
                padding-top: 100px;
                padding-bottom: 150px;
            }

            .section2{
                background-color: black;
            }

            .container-fluid{
                padding: 0px;
            }

            @media only screen and (max-width: 730px) {
                .logo{
                    width: 400px;
                }
            }
            @media only screen and (max-width: 460px) {
                .logo{
                    width: 350px;

                }
                .vh-center {
                  top: 40%;
                  left: 50%;
                  -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
                }
            }

        </style>
    </head>
    <body>
        <nav class="navbar navbar-expand-sm navbar-light fixed-top" id="navbar">
          <a class="navbar-brand" href="#" id="nb-brand">LP</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">

            </div>
        </nav> 



        <div class="container-fluid">
            <div class="section section1" id="sect1">
                <div class="title vh-center">
                    <h1>Logo</h1>
                </div>
            </div>


            <div class="section2 section-nosize" id="sect2">
                <div class="container">
                    <div class="content-dark custom-center">
                        <h2>Locations</h2>

                        <div class="row">
                            <div class="col-lg-4">
                                <div class="card">
                                     <div class="card-header">Blah</div>
                                    <!-- Offending Lines -->
                                     <img src="img/beach.jpg" class="card-img-top" alt="Exotic Beach">
                                     <div class="card-body">
                                      <h3 class="card-title">Blah</h3>
                                      <p class="card-text">Blah</p>
                                      <a href="#" class="btn btn-outline-secondary">Contact Us</a>
                                    </div>
                                    <!-- Offending Lines -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div> 

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/bootstrap.bundle.js"></script>
        <script>
        // On load
        setSection1Height();

        function setSection1Height(){
            var windowHeight = $(window).height()-$("nav").height();
            $(".section").height(windowHeight+40);
        }

        </script>
    </body>
</html>

我试图将页面精简到最小。注释掉“违规线条”，图像变形！。

我将尝试上传一些图像以显示我的意思。

引导卡会影响iOS上的固定背景图片的大小

0 个答案: