Bootstrap列img背景缩放

我遇到了我的Bootstrap代码http://goo.gl/ARUJz9问题。Bootstrap列img背景缩放

在所述主体的顶部是一个容器，包括：

<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标签，然后添加响应式，它仍然不起作用，图像不会填充整个横幅广告块。

我该如何编写这样才能在小屏幕上正确缩放？

来源

2016-02-02 FunnyGirl

如果没有什么别的页眉IMG怎么回事，我真的把专区内的独立，并设置宽度：100％，像这样：

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

这样的标题图片就会放大/缩小内其维度。

来源

2016-02-02 20:48:41 jake

或者您可以设置断点以在更大/更小的图像之间切换。我通常这样做是因为有时横幅中的文本太小，移动设备看不到。 – jake

不，试过了，它不起作用。图像拉伸宽度但不是高度。 – FunnyGirl

Bootstrap列img背景缩放

回答

相关问题