Question

我在http://goo.gl/ARUJz9处遇到了我的Bootstrap代码问题。

在身体的顶部是一个容器：

<div class="container">
  <div class="row">
     <div class="col-xs-12" id="banner-hdr"> 
     /div>
  </div>
</div>

CSS

#banner-hdr {
    height: 405px;
    background-image: url("../images/banner-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
}

这有一个CSS背景图片，在移动设备或平板电脑上查看时，该图片无法与网站一起扩展。如果我使用直接img标签，然后添加响应，它仍然不起作用，图像不会填满整个横幅块。

如何写这个以便它可以用较小的屏幕正确缩放？

Answer 1

如果标题img没有其他内容，我实际上会在div中单独设置并设置宽度：100％就像这样：

<div class="container">
  <div class="row">
     <div class="col-xs-12"> 
        <img src="your picture" style="width:100%;">
     </div>
  </div>
</div>

这样，标题图像将在其维度内放大/缩小。

Bootstrap Column img背景缩放

1 个答案: