Bootstrap carousel - how to use an image as background that is LARGER than the carousel?

Question

I've been beating myself this weekend to get around this one. I have a site that uses Bootstrap 3.0 and a Carousel with background images, and I've managed to reproduce my question in a small fiddle. I have a max-heighted div with an image inside. The image will typically be larger than the div (at least in height). I'm using the img-responsive class from bootstrap to make sure that in mobile browsers the image scales down. That is the reason why I max-height the div and don't put a fixed height on it.

My questions is: how can I get the image to vertically align to the middle? I've tried:

• Adding classes display: table and display: table-cell, but a table cell cannot have a max-height.
• Aligning things vertically but none seem to work.
• Setting a negative margin on the image using javascript, but that makes the div smaller as well as the div uses the image to size itself.
• Using css background instead of an inline image. This does not make the div be (at most) as large as the image and doesn't allow responsive growing/shrinking.

Fiddle: http://jsfiddle.net/SabbeRubbish/dZQ26/4/

<div class="carousel-inner">
  <div id="frame" class="item active">
    <img src="https://www.google.com/images/srpr/logo11w.png" 
         class="img-responsive" />
  </div>
</div>

Can anyone recommend me good and clean ways to get the image to center vertically? Or tell me what the hell I'm doing wrong? :-) Thanks.

PS: why center vertically? If the page is very wide, there is a large clip area as the image grows with the page. It is nicer to show the middle of the picture rather than the top.

Answer 1

is this something closer to what you are trying to achieve ?

#frame {
    border: 1px solid grey;
    max-height: 100px;
    min-height: 100px; /* Remove this line */
    padding: 15px 0px; /* Add this line to always have height on the div */
    background-size: cover;
    background-image: url(https://www.google.com/images/srpr/logo11w.png);
    background-position: center center;
}

http://jsfiddle.net/rrEYJ/

EDIT:

As suggested in the comments you can also use background-size: contain; to have the entire image inside the #frame element. You will probably have to also use background-repeat: no-repeat; in that case.

Check this fiddle: http://jsfiddle.net/rrEYJ/1/

EDIT2:

Based on your comment I did some research and apparently the background-size property can be set in percentages also. Based on this new information see this fiddle:

http://jsfiddle.net/rrEYJ/3/

EDIT3:

The css had a min-height property that's why the div wasn't changing it's height. Check this fiddle: http://jsfiddle.net/rrEYJ/4/

I hope this helps.

Answer 2

Add style for image like this

#frame img {
width:auto;
max-height:100px; }