1

I'm using a Bootstrap Carousel and am trying to maintain an image within it to stay centered when the window is re-sized (esp. down to mobile size).

The original image is 1600 x 600. I want it to fill the full width of the page in most cases. However, when it goes down to mobile (or iPad-like) size, I want it to have a minimum size of 800 x 300 AND be centered in the carousel.

I've tried the below but two things happen:

  1. The image does not center. It stays aligned to the left and crops the right.

  2. The image weirdly "jumps" between transitions. Right before the transition happens, the image seems to shift breifly/quickly and then transitions.

Here's the css and html:

    .carousel-inner img {
        width: 100%; max-height: 1800px; 
        min-height: 300px; min-width: 800px; overflow:hidden;
    }

    <div id="CarouselHome" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img src="img-1.jpg"">
            </div>
            <div class="item">
                <img src="img-2.jpg"">
            </div>
            <div class="item">
                <img src="img-3.jpg"">
            </div>
        </div>
    </div>

I also tried the items in the following link but they didn't work for me:

Make Bootstrap's Carousel both center AND responsive?

Community
  • 1
  • 1
ptownbro
  • 1,240
  • 3
  • 26
  • 44

2 Answers2

1

Use a transparent .png or .gif as the slide image and then style the background-image of each slides image using css. For mobile/tablet use a media query in your css to change the background size. Make sure that your background-images are the same size as the transparent background image.

The transparent image will maintain it's aspect ratio as the browser is resized, thus maintaining the aspect ratio of the carousel.

Add a class name to each item and use that in your css when you define your background images.

.item img {
  background:url(path-to-image) no-repeat center center;
  background-size:100% auto;
}
@media(max-width:800px){
  .item img {
    background-size:800px 300px;
    min-height: 300px; 
  } 
}

http://codepen.io/partypete25/pen/mPaJWb

partypete25
  • 4,353
  • 1
  • 17
  • 16
-1

I've used this solution: Center a large image of unknown size inside a smaller div with overflow hidden

This centers the images.

Community
  • 1
  • 1
paulocholla
  • 59
  • 2
  • 7
  • Please post your specific problem as another question; this is worth solving, and it won't get seen as part of an answer. – Prune Sep 15 '16 at 00:18
  • thanks @Prune. just did it, because i really want/need to solve this. here's the link: http://stackoverflow.com/questions/39501885/bootstrap-carousel-wide-centered-images-bumps-jumps-during-transition – paulocholla Sep 15 '16 at 01:25
  • ... but you neglected to remove the superfluous part from your answer here. I've just fixed that for you. Perhaps this will save you more down-votes. Also, please enhance your answer with an explanation. Link-only answers also draw flags and down-votes. – Prune Sep 15 '16 at 16:43