Responsive full width carousel in Bootstrap 3 with min height and auto crop

Question

To create a full width carousel in Bootstrap 3, I placed it directly in a row, without wrapping container. The carousel stretches perfectly to full screen width and scales to phone format. But here is the problem: because the carousel has a 100% width, the carousel scales too much on phone (320 px width): it is technically correct, but it would be nice if the height was higher.

Question: how to set a minimum height, maintain aspect ratio of the image and crop left and right on that minimum width?

Solution 1

I set the carousel-inner to be wider than the screen with a negative margin. This makes the carousel overflow and appear taller and more narrow, effectively cropping the left and right. On larger screens, I set it back to normal for the full image to appear. Finally, be careful that you have overflow: hidden; on the correct parent element so that mobile users don't experience unintended side-scroll.

.carousel-inner{
  width: 120%;
  margin-left: -10%;
}

@media (min-width: 768px){
  .carousel-inner{
    width: 100%;
    margin: 0;
  }
}

Solution 2

Your img width is 100%, when it scale width it scale height, you can fix this with .carousel-inner > .item > a > img {max-width:200%} and media queries

or even this: Twitter Bootstrap: Have carousel images full width and height

Comments

[Altreus]

I found I needed to up it to 200%, which meant it was helpful to add this: .carousel-caption { right: 30%; left: 30% } @media (min-width: 768px){ .carousel-caption { right: 15%; left: 15% } } - the 30% is because 200% is twice 100%, so 30% is twice 15%.