保持响应图像的高度相同，并在图像中居中

Question

我试图在我的页面上保持一个主横幅与浏览器窗口缩小的高度相同。我希望左/右侧最终被切断，横幅始终聚焦在图像的中心。

http://jsfiddle.net/ab4p4aaj/

<div class="container-fluid">
<div class="row no-gutter">
    <div class="col-md-12" id="home">
        <img src="http://www.lightswitchcreative.ca/_images/mainslide.jpg" alt="" class="img-responsive" id="mainslide" />
    </div>
</div>

Answer 1

用div替换你的图像：

<div class="container-fluid">
  <div class="row no-gutter">
    <div class="col-md-12" id="home">
        <div id="mainslider"></div> 
    </div>
  </div>
</div>

使用background-size: cover

将图片添加为背景

#mainslider {
    height: 200px;
    width: 100%;
    background: url(http://www.lightswitchcreative.ca/_images/mainslide.jpg) center no-repeat;
    background-size: cover;
} 

这是JSFIDDLE