使用引导程序使图像跨越浏览器的整个宽度答案

【问题标题】：Make an image span the entire width of the Browser using bootstrap使用引导程序使图像跨越浏览器的整个宽度
【发布时间】：2014-04-23 10:24:54
【问题描述】：

我有一张大图，想用浏览器的整个宽度显示。

我的代码是：

<html><body>
   <div class="container">
      <div class="row">
         <div class="col-md-12">
             <h3> Welcome! </h3>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div class="main_image">
                <img src="..."/>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div class="main_content">....</div>
         </div>
      </div>
   </div>
</body></html>

Bootstrap 将自动创建边距/填充以使图像适合页面中心。

有没有办法让主图像始终适合浏览器的整个宽度，但保留页面上其他所有内容的填充/边距？

【问题讨论】：

标签： html twitter-bootstrap responsive-design

【解决方案1】：

最好的办法是将图像指定为背景图像。

这是一个 JSFiddle (https://jsfiddle.net/qoaqjgpz)，其中仅包含来自 http://startbootstrap.com/template-overviews/full-width-pics/ 的最重要的内容。

.html:

<div class="image-bg-fixed-height">
</div>

.css：

.image-bg-fixed-height {
    background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
    height: 450px;
}

.img-center {
    margin: 0 auto;
}

如果这是您要搜索的内容，请告诉我。

【讨论】：