web-dev-qa-db-fra.com

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

S'il vous plaît jetez un oeil à l'image suivante, nous utilisons bootstrap carrousel pour faire pivoter les images. Toutefois, 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 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 certaine bootstrap config est 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>

carousel image

javascriptjquerytwitter-bootstrapcarousel
89
Nambi

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

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

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

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

Cela redimensionne automatiquement l'image et la centre.

Modifier:

Avec bootstrap 4, ajoutez simplement la classe img-fluid

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

J'ai rencontré le même problème et l'ai résolu de cette façon: il est possible d'insérer du contenu non-image dans Carousel afin que nous puissions l'utiliser. Vous devez d’abord insérer div.inner-item (où vous allez aligner le centre), puis insérer une image dans 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;
    }
}
_
18
vekozlov

Bien que la réponse de vekozlov fonctionne dans Bootstrap 3 pour centrer votre image, elle se cassera lorsque le carrousel sera réduit: l'image conservera sa taille au lieu d'être réduite avec le carrousel. .

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>

Ceci centrera le carrousel dans son ensemble et l’empêchera de se développer au-delà de la largeur de vos images (c'est-à-dire 900 px ou ce que vous souhaitez définir). Cependant, lorsque le carrousel est réduit, les images sont réduites.

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

6
Daniel A.A. Pelsmaeker

Essayez ceci

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

Je suis confronté au même problème avec vous. Basé sur le soupçon de @thuliha, les codes suivants ont résolu mes problèmes.

Dans le fichier html, modifiez comme 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
Tung

Cela pourrait avoir quelque chose à voir avec vos styles. Dans mon cas, j'utilise un lien dans le parent "item", je devais donc 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
Art L. Richards

Je pense avoir une solution:

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

Créez une "classe" distincte supplémentaire sur cette division supérieure qui s'approprie l'espace avec des étendues ... (voir 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 fichier bootstrap.css, dans votre propre feuille de style, appelez "carrousel" (ou le nom de votre choix) pour faire correspondre la largeur et la hauteur de votre photo originale!

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

}

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

1
rnaka530

Est-ce que vos images ont exactement une largeur de 460px comme le span6? Dans mon cas, avec différentes tailles d'image, je mets un attribut de hauteur sur mes images pour m'assurer qu'elles sont toutes de la même hauteur et que le carrousel ne 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 carrousel-inner div soit identique à l'aspectRatio de vos images.

0
Seb Cesbron

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

De plus, lorsque vous vous référez à la page d'échafaudage de Bootstrap, je suis à peu près 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 faire attention lorsque vous réglez les espaces sur une ligne, car si la largeur de l'image est trop grande, votre div sera envoyé dans la "rangée" suivante et ce n'est pas amusant: P

lien 1

0
rnaka530

Dans Bootstrap 4, vous pouvez ajouter la classe mx-auto à votre balise img.

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 traduira automatiquement mx-auto en:

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

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

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éparée. J'ai observé très attentivement le carrousel du bootstrap http://Twitter.github.com/bootstrap/javascript.html#carousel .

Je découvre que la largeur d'img doit être plus grande que la largeur de la grille. Dans span9, la largeur est de 870 pixels, vous devez donc préparer une image plus grande que 870 pixels. Si vous avez plus de conteneurs en dehors de img, comme tous les conteneurs ont une bordure ou une marge, vous pouvez utiliser une image de largeur inférieure.

0
Kevin Tong

Insérez ceci 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];
}
0
Jay Tiedra