css - 保持响应图像相同的高度并在图像内居中

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