Question

我有关于将图像高度设置为引导程序中的div高度的问题。我有四张图像就像着陆页一样，每个图像都需要设置为容器作为div的背景。这是我的代码，所以如果你能看到我错在哪里：

HTML

    <!--Start navi-->
    <navi>
    <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation" style="border:none;">
        <div class="navbar-inner"> <!--changes made here-->
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">

                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="../logo_header_smaller.png" alt="">
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a class="btn btn-lg" href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div> 
    </nav>
    <!--End navi-->

    <div class="container-fluid image1">
        <!--First Image-->  
        <div class="row image1">
        <div class="col-lg-12 col-md-12 col-xs-12 text-center" >
                <h1 style="color:white">Pojednostavnite svoje poslovanje</h1>
                <h4 style="color:white">Ponude, računi, vođenje zalihe, pregled poslovanja...</h4>
                <h4 style="color:white">sve na jednom mjestu!</h4>
                <br>
                <br>
                <button style="font-weight:600" class="btn btn-md round">ISPORBAJTE APLIKACIJU</button>
            </div>
        </div>
    </div>

CSS

    html,body{

      height:100%;
        font-family:  'Source Sans Pro', sans-serif;
        font-size: 14px;
      margin:0; 
      padding:0;
    }

    .navbar {
       background-color: transparent;
       background: transparent;
    }

    .container-fluid{
      width:100%;
    }

    .image1{
      background: url("..landing/homepage_image_hero.png") no-repeat center top scroll;
      background-size: 100% auto;
      height:100%;
      }
   .image2{
      background: url("../landing/homepage_image.png") no-repeat center top scroll;
      background-size: 100% auto;
      height:100%;
      }

真实图像大小： img1 - 宽度：1400px高度：632px img2 - widht：1400px身高：632px

更好的问题是当我想在背景中插入图像的div时，如何设置widouth填充。感谢阅读。

Answer 1

尝试设置background-size:contain;

w3schools链接：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

希望这有帮助。

Bootstrap 3自动将图像高度设置为div高度

1 个答案: