Question

我正在使用Bootstrap 3，但是当我缩小浏览器时，似乎无法将我的图像放在横幅中以便做出响应。

我有一个横幅，我只希望显示大约80％的图像。昨天我用CSS展示了如何做到这一点，然而，它没有对小型浏览器做出响应。图像是1400x350，当我拉入浏览器模仿平板电脑或手机时，图像不会根据浏览器大小缩小。

这是我的代码，使用div只显示图像的一部分。

.banner {
  background-image: url('../Images/banner.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  height: 155px;
}

<body>
    <div class="container">
        <div class="banner"></div>
    </div>
</body>

我尝试将其设置为使用img-responsive，但这并没有什么不同。它仍然不会扩展。

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <img src="~/Images/banner.jpg" class="img-responsive" />
            </div>
        </div>
    </div>
</body>

根据我的搜索，使用img-responsive应该有效，但它没有。我会说我认为Bootstrap正在工作，因为我在横幅下面有一个Grid。当我调整浏览器的大小时，Grid会像它应该的那样调整大小/堆栈。

如何使div标签中的图像响应？

0 个答案: