Question

我正在使用bootstrap3创建一个网站。我使用图像作为div的背景但图像没有以正确的比例显示。可见的图像仅显示其一部分。我的代码和css如下：

 <div class="jumbotron"> 

        <div class="container">
            <div class="col-md-12"> 

                <div class="col-md-4">            
                     <div  id="show_div" class="dropdown">Menu
                      <span class="caret"></span>
                          <div id="hello" style="visibility:hidden;" >
                              <ul class="dropdown-menu" style="display:block!important;" role="menu" aria-labelledby="dropdownMenu1">
                                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Our Services</a></li>
                                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
                                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact Us</a></li>                          
                             </ul>
                          </div>                 
                     </div>
                </div>
                 <div class="col-md-4">
                     <p class="text-center"><a role="button" href="#" class="btn btn-default">Sign Up</a></p>
                </div>
                <div class="col-md-4">
                     <p class="text-right"><a role="button" href="#" >Sign Up</a></p>
              </div>            
            </div>


        <div class="col-md-12 clear-fix"> </div>
            <div class="cover-container">
                    <div class="inner cover">
                        <h2 class="cover-heading">hello</h1>                        
                        <p class="lead">
                          <a class="btn btn-lg btn-default" href="#">Login</a>
                        </p>
                    </div>
             </div>

       <div class="col-md-12 clear-fix"> </div>

        <div class="col-md-12 botomopdv"> 
            <div class="col-md-4 "> 
            <div class="text-center textwrap">+91-9898976766</div>
            </div>
            <div class="col-md-4 "> 
            <div class="text-center textwrap"><img src="images/visa.png"></div>
            </div>
            <div class="col-md-4 "> 
                <div class="text-center textwrap">
                <i class="fa fa-youtube fsz fa-inverse"></i>
                <i class="fa fa-twitter-square fsz fa-inverse"></i>
                <i class="fa fa-facebook-square fsz fa-inverse"></i>
                <i class="fa fa-linkedin-square fsz fa-inverse"></i> 
                </div>
            </div>
        </div>
         </div>             
    </div>

我的css是这样的：

.jumbotron{
background-image:url('../images/slide.png');
padding-bottom:1px!important;

}

Answer 1

如果我理解您的问题，请尝试添加background-size:cover：

.jumbotron{
  background-image:url('../images/slide.png');
  padding-bottom:1px!important;
  background-size:cover;         /**** add this line ****/
}

Answer 2

您的所有代码都是正确的，但您可以试用background-size: 100% 100%;或background-size: cover;

bootstrap 3中的背景图像问题

2 个答案: