Question

我刚开始使用bootstrap。我想创建一个div，其中div内部的图像具有固定的高度，例如30％。我创建了包含具有固定高度的图像的div，但我无法理解为什么宽度不是所有页面。当我在div下面创建一个导航栏时，图像没有附加但仍保持断开状态。我的想法是创建这样的东西：http://www.templatemonster.com/demo/51241.html

我目前所写的内容： HTML代码：

<div class="container-fluid container-image">
        <div class="row my-row" style="height:100px; width: 100%">
        <div class="col-md-12">
          <div class="content"></div>
            <div class="background" ></div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-default">
      <div class="container">

      </div>
    </nav>

CSS代码：

.my-row{
        position: relative;
        height: 100%;
        overflow: hidden;
}
.content{
        position: relative;
        width: 100%;
        text-align: center;
        padding: 10px;
}
.background {
        position: absolute;
        padding-top: 200%;
        left: 0;
        top: 0;
        width: 100%;
        background-image: url(image.jpg);
        background-repeat: no-repeat;
    }
body, html, .container-fluid {
     height: 100%;
    width: 100%;
}

Answer 1

问题在于您尝试调整背景图像本身的所有但的大小一个简单的解决方案就在眼前：在 .background CSS代码中，只需将 background-size 设置为100％即可。这将确保您的图片始终缩放到提供的 col-md-X 类。

background-size: 100%;

创建一个包含图像的div，它使用Bootstrap具有固定的高度

1 个答案: