Question

我想要使用整个浏览器宽度显示大图像。

我的代码是：

<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将自动创建边距/填充以使图像适合页面的中心。

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

Answer 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;
}

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

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

1 个答案: