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

Question

我刚开始使用 Bootstrap 。 我想在具有固定高度(例如 30%)的 div 中创建一个带有图像的 div。 我已经创建了包含具有固定高度的图像的 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%;