Bootoutrap Carousel image does not align properly

Question

Please take a look at the following image, we use a carousel to upload images. However, when the width of the window is large, the image does not align with the border correctly.

But the carousel example provided by bootstrap always works great, regardless of window width. Following the code.

Can someone explain why the carousel behaves differently? Is this something related to image size or the absence of any bootstrap configuration?

<section id="carousel"> <div class="hero-unit span6 columns"> <h2>Welcome to TACT !</h2> <div id="myCarousel" class="carousel slide" > <!-- Carousel items --> <div class="carousel-inner"> <div class="item active" > <img alt="" src="/eboxapps/img/3pp-1.png"> <div class="carousel-caption"> <h4>1. Need a 3rd party jar?</h4> </div> </div> <div class="item"> <img alt="" src="/eboxapps/img/3pp-2.png"> <div class="carousel-caption"> <h4>2. Create Request</h4> </div> </div> <div class="item"> <img alt="" src="/eboxapps/img/3pp-3.png"> <div class="carousel-caption"> <h4>3. What happens?</h4> </div> </div> <div class="item"> <img alt="" src="/eboxapps/img/3pp-4.png"> <div class="carousel-caption"> <h4>4. Status is Emailed</h4> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> </div> 

Answer 1

The solution is to put this css code in your custom css file

.carousel-inner > .item > img { margin: 0 auto; }

Answer 2

With bootstrap 3, just add responsive and central classes:

  <img class="img-responsive center-block" src="img/....jpg" alt="First slide"> 

This automatically resizes the image and centers the image.

Edit:

With bootstrap 4, just add the img-fluid class

 <img class="img-fluid" src="img/....jpg"> 

Answer 3

I ran into the same problem and solved it like this: It’s possible to insert content without an image into the carousel so that we can use it. First you need to insert div.inner-item (where you will align the center), and then insert the image inside this div.

Here is my code (Ruby):

 <div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <%= image_tag "couples/1.jpg" %> </div> <% (2..55).each do |t|%> <div class="item"> <div class='inner-item'> <%= image_tag "couples/#{t}.jpg" %> </div> </div> <% end -%> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> 

And my css code (.scss):

 .inner-item { text-align: center; img { margin: 0 auto; } } 

Answer 4

While vekozlov's answer will work in Bootstrap 3 to center your image, it will break when the carousel is reduced: the image retains its size instead of being scaled using the carousel.

Instead, do this on a top-level carousel div :

 <div id="my-carousel" class="carousel slide" style="max-width: 900px; margin: 0 auto"> ... </div> 

This centers the entire carousel and prevents it from growing beyond your images (i.e. 900 pixels or whatever you want to set). However, when the carousel shrinks, the images shrink with it.

You should put this styling information in your CSS / LESS file, of course.

Answer 5

I think I have a solution:

On the page of your personal style sheet, set the width and height to match your image size.

Create an additional separate class in this upper div that assigns space to spaces ... (shown below)

  <div class="span6 columns" class="carousel"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> 

Without touching bootstrap.css, in your own stylesheet, call the "carousel" (or any other shortcut you choose) to match the width and height of the original pixel!

 .carousel { width: 320px; height: 200px; 

}

So, in my case, I use small 320x200 images for a carousel. There are probably predefined sizes in bootstrap.css, but I don't like to change this, so I can try to stay up to date with future releases. Hope this helps ~~

Answer 6

This may have something to do with your styles. In my case, I use the link in the parent element "item", so I had to change the stylesheet to say the following:

 .carousel .item a > img { display: block; line-height: 1; } 

according to the pre-existing forward code:

 .carousel .item > img { display: block; line-height: 1; } 

and my image is as follows:

 <div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div> 

Answer 7

Do your images have exactly 460px width like span6? In my case, with different image sizes, I put a height attribute on my images to make sure they are the same height, and the carousel does not resize between images.

In your case, try to set the height so that the ratio between this height and the width of your inner carousel is the same as aspectRatio of your images

Answer 8

For a carousel, I believe that all images should be the same height and width.

Also, when you link to the scaffolding page from bootstrap, I'm sure span16 = 940px. With that in mind, I think we can assume that if you have

 <div class="row"> <div class="span4"> <!--left content div guessing around 235px in width --> </div> <div class="span8"> <!--right content div guessing around 470px in width --> </div> </div> 

So, you have to be careful when setting the space of spaces in a line, because if the width of the image is large, it will send your div to the next "line" and this is not fun: P

Link 1

Answer 9

The @Art L. Richards solution did not work out. now in bootstrap.css, the source code has become like this.

 .carousel .item > img { display: block; line-height: 1; } 

The @ rnaka530 code would break the bootstrap fluid function.

I do not have a good solution, but I fix it. I watched the bootstrap carousel example http://twitter.github.com/bootstrap/javascript.html#carousel very carefully.

I find out that the img width should be greater than the grid width. In span9 width is up to 870 pixels, so you need to prepare an image larger than 870 pixels. If you have more containers outside of img, since all containers have a border or margin, you can use an image with a smaller width.

Answer 10

Paste this into the parent css div class where your carousel is located.

 <div class="parent_div"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="assets/img/slider_1.png" alt=""> <div class="carousel-caption"> </div> </div> </div> </div> </div> 

CSS

 .parent_div { margin: 0 auto; min-width: [desired width]; max-width: [desired width]; } 

Answer 11

I ran into the same problem with you. Based on @thuliha's hint, the following codes solved my problems.

In the html file, modify the following example:

 <img class="img-responsive center-block" src=".....png" alt="Third slide"> 

In carousel.css , change the class:

 .carousel .item { text-align: center; height: 470px; background-color: #777; } 

Answer 12

Try

  .item img{ max-height: 300px; margin: auto; }