4

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?

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
user2969467
  • 43
  • 1
  • 1
  • 3
  • Please share some of your code; it will be easier for people to help you if they can see what you've tried already, than for them to try to recreate the problem from scratch. – Simon Martin Nov 08 '13 at 15:50

2 Answers2

3

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;
  }
}
ntrrobng
  • 408
  • 5
  • 15
  • 1
    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%. – Altreus Sep 05 '16 at 11:49
1

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

Community
  • 1
  • 1
Aleksandar Alex Perisic
  • 11
  • 1