CODEWITHSUNDEEP
csstwitter-bootstrap
user1110562
user1110562

Reputation: 423

Keep responsive image same height and centered within image

I'm trying to keep a main banner on my page the same height as the browser window shrinks. I would like the left / right sides to end up being cut off and the banner to always focus on the center of the image.

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>

Upvotes: 0

Views: 1271

Answers (1)

nanndoj
nanndoj

Reputation: 6770

Replace your image by a div:

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

And add the image as background using background-size: cover

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

Here is a JSFIDDLE

Upvotes: 2

Related Questions