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

Posted 2023-02-25

【中文标题】Bootstrap 3 将图像高度自动设置为 div 高度

【英文标题】：Bootstrap 3 set image height automaticly to be div height

【发布时间】：2015-03-16 10:13:10

【问题描述】：

我对在引导程序中将图像高度设置为 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" >
                    </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 - 宽度：1400 像素高度：632 像素

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

【参考方案1】：

尝试设置background-size:contain;

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

希望这会有所帮助。

【讨论】：

您好，我尝试使用该设置，但不会进行任何更改。图片宽度填充底部：45% 可以自我展示。

你是否为 div 添加了高度。将最小高度设置为 632px。

是的，我通过设置 background-size:cover 解决了它；