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


93

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>

image de carrousel


Toutes vos images ont-elles la même largeur? Aussi, s'étirent-ils jusqu'à leur .span6conteneur?
Andres Ilich

1
toutes mes images ont la même largeur et la même hauteur. Tous semblent s'étirer. Pour essayer de corriger, j'ai essayé de créer des images avec la même taille que celle fournie par l'exemple de bootstrap. Mais cela a complètement gâché la taille. Donc, je pense qu'il y a un lien entre la taille de l'image et le style css. Mais la documentation ne décrit pas complètement la relation.
Nambi

J'ai aussi rencontré ce problème, et c'était assez frustrant. Pour moi, il s'est avéré que cela se produisait parce que le div contenant le carrousel avait une largeur fixe qui était plus large que le carrousel.
WuTheFWasThat

Peut-être que cacher l'adresse e-mail aurait été une bonne idée :)
tgdn

Réponses:


160

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

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

1
cela a fonctionné pour moi! J'ai essayé la méthode vekozlov mais je n'ai pas fonctionné, cela fonctionne! merci beaucoup
ah-shiang han

La hauteur du carrousel change pour différentes hauteurs d'images, vous devrez donc définir une largeur fixe en css.
QuantumHive

Super! J'espère que ce sera juste une classe BS «intégrée» telle que .carousel-img-center ou quelque chose de bientôt.
CodeFinity

J'essaierai la marge mais j'ai trouvé que l'ajout height:nonepour .carousel-inner > .item > imgobtenir de meilleurs résultats que la valeur par défautheight:500px
CrandellWS

Vous devriez faire .carousel-inner > .carousel-item > img { margin: 0 auto; }pour Bootstrap 4.
Expenzor

125

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

9
J'ai essayé les solutions les plus votées en vain. C'est beaucoup plus propre, plus simple et travaillé. Je vous remercie!
Kyle

2
Maigre et propre. Merci
Chiefenne

2
Parfait, merci. Je jure que j'ai déjà cherché sur Google et que je n'ai pas obtenu de réponse, cela a fonctionné tout de suite.
Chud37

J'utilise bootstrap 4 et la classe img-fluid ne centre pas les images. Ils sont tous justifiés.
Malchesador

2
@iaacp vient d'ajouter text-centerà la <div class="carousel-item">balise de départ
deanwilliammills

18

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

ce css a très bien fonctionné pour moi, en plus de fixer la hauteur des images dans le carrousel
SporkInventor

6

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.


3

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

1

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>

1

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


1

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

1

Essaye ça

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

Bienvenue dans StackOverflow! Votre réponse pourrait être très utile si vous expliquiez un peu comment cela résout la question. Les réponses basées uniquement sur le code ne sont pas si bien reçues sur SO.
René Vogt

0

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


ça n'aide pas. Pensez-vous que le format d'image compte? L'exemple de bootstrap utilise des fichiers JPEG, où j'utilise des fichiers PNG. Cela fait-il une différence.
Nambi

0

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.


0

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


0

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];
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.