L'image du carrousel Bootstrap ne s'aligne pas correctement

Veuillez jeter un œil à l'image suivante, nous utilisons un carrousel bootstrap pour faire pivoter les images. Cependant, lorsque la largeur de la fenêtre est grande, l'image ne s'aligne pas correctement avec la bordure.

Mais l'exemple de carrousel fourni par bootstrap fonctionne toujours correctement, quelle que soit la largeur de la fenêtre. Suivre le code.

Quelqu'un peut-il expliquer pourquoi le carrousel se comporte différemment? Est-ce que cela a quelque chose à voir avec la taille de l'image ou une configuration d'amorçage manque?

<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>

La solution est de mettre ce code CSS dans votre fichier CSS personnalisé:

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

Avec bootstrap 3, ajoutez simplement les classes responsive et center:

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

Cela effectue automatiquement le redimensionnement de l'image et centre l'image.

Éditer:

Avec bootstrap 4, ajoutez simplement la img-fluidclasse

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

J'ai rencontré le même problème et je l'ai résolu de cette façon: il est possible d'insérer du contenu sans image dans Carousel, afin que nous puissions l'utiliser. Vous devez d'abord insérer div.inner-item(là où vous effectuerez l'alignement central), puis insérer l'image à l'intérieur de ce div.

Voici mon 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>

Et mon code css (.scss):

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

Alors que la réponse de vekozlov fonctionnera dans Bootstrap 3 pour centrer votre image, elle se cassera lorsque le carrousel sera réduit: l'image conserve sa taille au lieu de la réduire avec le carrousel.

À la place, faites ceci sur le carrousel de niveau supérieur div:

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

Cela centrera tout le carrousel et l'empêchera de dépasser la largeur de vos images (c'est-à-dire 900 px ou ce que vous voulez régler). Cependant, lorsque le carrousel est réduit, les images diminuent avec lui.

Vous devriez bien sûr mettre ces informations de style dans votre fichier CSS / LESS.

Dans Bootstrap 4, vous pouvez ajouter une mx-autoclasse à votre imgbalise.

Par exemple, si votre image a une largeur de 75%, elle devrait ressembler à ceci:

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

Bootstrap se traduira automatiquement par mx-auto:

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

Cela pourrait avoir quelque chose à voir avec vos styles. Dans mon cas, j'utilise un lien dans la div "item" parent, j'ai donc dû changer ma feuille de style pour dire ce qui suit:

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

sous le code boostrap préexistant:

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

et mon image ressemble à:

<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>

Je pense avoir une solution:

Dans votre page de feuille de style personnelle, attribuez la largeur et la hauteur correspondant aux dimensions de votre image.

Créez une "classe" distincte supplémentaire sur ce div supérieur qui s'approprie l'espace avec des travées ... (illustré ci-dessous)

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

Sans toucher le bootstrap.css, dans votre propre feuille de style, appelez "carrousel" (ou n'importe quelle étiquette que vous choisissez) pour correspondre à la largeur et à la hauteur de votre pix d'origine!

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

}

Donc, dans mon cas, j'utilise de petites images 320x200 pour faire du carrousel. Il y a probablement des dimensions prédéfinies dans le fichier bootstrap.css, mais je n'aime pas changer cela pour pouvoir essayer de rester à jour avec les versions futures. J'espère que cela aide ~~

Je suis confronté au même problème avec vous. Basé sur l'indice de @thuliha, les codes suivants ont résolu mes problèmes.

Dans le htmlfichier, modifiez comme l'exemple suivant:

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

Dans le carousel.css, modifiez la classe:

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

Essaye ça

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

Vos images ont-elles exactement une largeur de 460px comme span6? Dans mon cas, avec des tailles d'image différentes, je mets un attribut de hauteur sur mes images pour m'assurer qu'elles ont toutes la même hauteur et que le carrousel ne se redimensionne pas entre les images.

Dans votre cas, essayez de définir une hauteur afin que le rapport entre cette hauteur et la largeur de votre div intérieur du carrousel soit le même que l'aspectRatio de vos images

La solution de @Art L. Richards n'a pas fonctionné. maintenant dans bootstrap.css, le code original est devenu comme ça.

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

Le code de @ rnaka530 briserait la fonctionnalité fluide de bootstrap.

Je n'ai pas de bonne solution mais je l'ai résolue. J'ai observé très attentivement l'exemple de carrousel du bootstrap http://twitter.github.com/bootstrap/javascript.html#carousel .

Je découvre que la largeur de l'image doit être plus grande que la largeur de la grille. Dans span9, la largeur peut atteindre 870 pixels, vous devez donc préparer une image plus grande que 870 pixels. Si vous avez plus de conteneur en dehors de l'img, comme tout le conteneur a quelque chose de bordure ou de marge, vous pouvez utiliser une image de plus petite largeur.

Pour le carrousel, je pense que toutes les images doivent être exactement de la même hauteur et largeur.

De plus, lorsque vous vous référez à la page d'échafaudage de bootstrap, je suis presque sûr que span16 = 940px. Dans cet esprit, je pense que nous pouvons supposer que si vous avez un

<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>

Alors oui, vous devez être prudent lorsque vous définissez l'espace des travées dans une ligne car si la largeur de l'image est trop grande, elle enverra votre div dans la "rangée" suivante et ce n'est pas amusant: P

Lien 1

Insérez-le dans la classe div parent css où se trouve votre carrousel.

<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];
}