jquery - Bootstrap 3 自动设置图片高度为div高度

Question

我对在 bootstrap 中将图像高度设置为 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 高度:632pximg2 - 宽度:1400px 高度:632px

更好的问题是当我想将文本插入到图像在背景中的 div 时如何设置宽度填充。感谢阅读。

Answer 1

尝试设置background-size:contain;

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

希望这对您有所帮助。