Bootstrap 4 - 我无法在div中拉伸背景图像

问题描述 投票：1回答：3

我正在尝试创建一个仅使用屏幕空间的网站。

徽标位于页面的中上部，全宽导航栏，然后是2行3个全宽图像，可以在分辨率允许的情况下裁剪。 Here is the sketch.

我的问题是，设置为col-sm-4 div背景的图像没有显示，它们的高度设置为0px（我试过！重要）。该代码不对高度（％）或背景大小 - 封面做出反应。如何在每个分辨率的相同高度的页面上精确制作这些图像？

@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
         @import url('https://fonts.googleapis.com/css?family=Cinzel');
        /*ALL*/
         html, body {
            height: 100% !important;
             width: 100% !important;
        }
         body {
            background: grey !important;
        }
         header {
            height: 15% !important;
        }
         .Menu {
            height: 5% !important;
        }
         .Images {
            height: 80% !important;
        }
        /*Header*/
         .logo {
            display: inline-block;
             padding: 1rem 0 .5rem 0 !important;
        }
         .col-sm-4 {
             border: solid 1px #9f0000;
        }
         .Images {
        }
         .image {
             background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
             height: 100%;
             background-position: center;
             background-repeat: no-repeat;
             background-size: cover;
        }
        /* NavBar */
         nav {
            font-size: 13pt;
             font-family: 'Cinzel', sans-serif;
             padding: .3rem 0 .3rem 0 !important;
             text-transform: capitalize;
        }
         .nav-link {
            color: #fff !important;
             margin: 0 25% 0 25%;
        }
         .nav-link:hover {
            font-style: underline;
        }
<!DOCTYPE html>
<html lang="cs">

<head>
    <meta charset="utf-8">
    <!-- Mobile adaptation -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <!-- Mine Stylesheet -->
    <link rel="stylesheet" href="stylesheet/stylesheet.css">
    <!-- Imported Stylesheets -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>


    <!-- Scripts (jQuery) -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

    <!-- Tittle -->
    <title>Geo Expo</title>

</head>

<body>
    <main class="container-fluid p-0">
        <header class="row Logo no-gutters">
            <div class="col-sm-3">
                <header>
                    <img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
                </header>
            </div>
        </header>
        <div class="row Menu no-gutters">
            <div class="col-sm-12">
                <nav class="navbar navbar-expand-lg">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
                            </button>
                    <div class="collapse navbar-collapse" id="Toogle">
                        <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Repliky</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Unikáty</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Instalace</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Kontakt</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="row Images no-gutters">
            <div class="col-sm-4 image" id="image00"></div>
            <div class="col-sm-4 image" id="image01"></div>
            <div class="col-sm-4 image" id="image02"></div>

            <div class="col-sm-4 image" id="image10"></div>
            <div class="col-sm-4 image" id="image11"></div>
            <div class="col-sm-4 image" id="image12"></div>
            <!--  <div class="col-sm-4">
                        <img class="image" src="./images/bridge.jpg" alt="Bridge">
                    </div>
                    <div class="col-sm-4">
                        <img class="image" src="./images/park.jpg" alt="Park">
                    </div>
                    <div class="col-sm-4">
                        <img class="image" src="./images/tunnel.jpg" alt="Tunnel">
                    </div>
                    <div class="col-sm-4">
                        <img class="image" src="./images/bridge.jpg" alt="Bridge">
                    </div>
                    <div class="col-sm-4">a
                        <img class="image" src="./images/park.jpg" alt="Park">
                    </div>
                    <div class="col-sm-4">
                        <img class="image" src="./images/tunnel.jpg" alt="Tunnel">
                    </div> -->
        </div>
    </main>
</body>

</html>
javascript html css twitter-bootstrap bootstrap-4
3个回答
1
投票

最简单的方法是使用vh DIV上的.image单位（视口高度的百分比）设置最小高度...

https://www.codeply.com/go/iFDwwGDmKi

.image {
     background-image: url("..");
     min-height: 45vh;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

编辑：

要使图像填充剩余页面高度，无需滚动，设置flex-grow容器上隐藏的.Images和溢出。

.Images {
    flex-grow: 1;
    overflow-y:hidden;
}

https://www.codeply.com/go/iFDwwGDmKi（更新）

1
投票

您只需要将自然的Bootstrap 4类img-fluid添加到您的图像中，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<main class="container-fluid p-0">
    <header class="row Logo no-gutters">
        <div class="col-sm-3 mx-auto">
            <header> 
                <img class="logo d-block img-fluid mx-auto" src="https://placehold.it/120x60" alt="Logo" />                     
            </header>
        </div>
    </header>
    <div class="row Menu no-gutters">
        <div class="col-sm-12">
            <nav class="navbar navbar-expand-lg">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
                </button>
                <div class="collapse navbar-collapse" id="Toogle">
                    <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Repliky</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Unikáty</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Instalace</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Kontakt</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="row Images no-gutters">
        <div class="col-sm-4 image" id="image00">
            <img class="img-fluid" src="https://placeimg.com/640/480/arch">
        </div>
        <div class="col-sm-4 image" id="image01">
            <img class="img-fluid" src="https://placeimg.com/640/480/animals">
        </div>
        <div class="col-sm-4 image" id="image02">
            <img class="img-fluid" src="https://placeimg.com/640/480/nature">
        </div>

        <div class="col-sm-4 image" id="image10">
            <img class="img-fluid" src="https://placeimg.com/640/480/people">
        </div>
        <div class="col-sm-4 image" id="image11">
            <img class="img-fluid" src="https://placeimg.com/640/480/tech">
        </div>
        <div class="col-sm-4 image" id="image12">
            <img class="img-fluid" src="https://placeimg.com/640/480/any">
        </div>
    </div>
</main>
0
投票

正如Temani Afif所指出的，您没有指定具有特定高度的任何父级。在.image类中指定高度而不是100%，即height: 200px;

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.