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

Question

Regardez l'image suivante, nous utilisons un carrousel bootstrap pour faire tourner les images. Cependant, lorsque la largeur de la fenêtre est importante, l'image ne s'aligne pas correctement avec la bordure.

Mais l'exemple de carrousel fourni par bootstrap fonctionne toujours bien, quelle que soit la largeur de la fenêtre. En suivant 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 bootstrap manquante ?

<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

La solution consiste à placer ce code CSS dans votre fichier CSS personnalisé :

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

Answer 2

Avec bootstrap 3, il suffit d'ajouter les classes responsive et center :

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

Cela permet de redimensionner automatiquement l'image et de la centrer.

Edit :

Avec bootstrap 4, il suffit d'ajouter l'élément img-fluid classe

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

Answer 3

J'ai été confronté au même problème et je l'ai résolu de cette façon : Il est possible d'insérer du contenu non-image dans le Carousel, nous pouvons donc l'utiliser. Vous devez d'abord insérer div.inner-item (où vous ferez l'alignement central), puis insérez l'image à l'intérieur de cette division.

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

Answer 4

Alors que vekozlov La réponse de l'auteur fonctionne dans Bootstrap 3 pour centrer votre image, mais elle ne fonctionne pas lorsque le carrousel est réduit : l'image conserve sa taille au lieu d'être réduite avec le carrousel.

Au lieu de cela, 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 permet de centrer l'ensemble du carrousel et de l'empêcher de s'étendre au-delà de la largeur de vos images (c'est-à-dire 900 px ou la valeur que vous souhaitez définir). Cependant, lorsque le carrousel est réduit, les images sont réduites avec lui.

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

Answer 5

Je pense que j'ai une solution :

Dans votre page de feuille de style personnelle, attribuez la largeur et la hauteur à match les dimensions de votre image.

Créez une "classe" supplémentaire distincte sur cette div supérieure 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 au fichier 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 pixel original !

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

}

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