个人中心
gpt4 book ai didi

javascript - Bootstrap 4 - 我无法在 div 中拉伸(stretch)背景图像

转载 作者：行者123 更新时间：2023-11-30 14:48:06 25 4
gpt4 key购买 nike

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

Logo 位于页面的中上部，全宽导航栏，然后是 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>

最佳答案

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

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 容器上 overflow hidden 。

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

https://www.codeply.com/go/iFDwwGDmKi (更新)

关于javascript - Bootstrap 4 - 我无法在 div 中拉伸(stretch)背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48585714/

25 4 0
文章推荐： c# - 使用 BinaryReader 逐行读取
文章推荐： c - 在 C 中写入指针数组
文章推荐： c# - 为单元测试模拟 HttpRequest.Form
文章推荐： javascript - 如何从维基百科 API 获取单个段落
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com