ブートストラップカルーセルの画像が正しく配置されない

次の画像をご覧ください。画像の回転にはブートストラップカルーセルを使用しています。ただし、ウィンドウの幅が大きい場合、画像はボーダーに正しく配置されません。

しかし、ブートストラップによって提供されるカルーセルの例は、ウィンドウの幅に関係なく、常に適切に機能します。コードに従う。

カルーセルが異なる動作をする理由を誰かが説明できますか？これは画像サイズと関係がありますか、それともブートストラップ設定が不足していますか？

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

解決策は、このCSSコードをカスタムCSSファイルに挿入することです。

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

ブートストラップ3では、レスポンシブクラスとセンタークラスを追加するだけです。

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

これにより、画像のサイズが自動的に変更され、画像が中央に配置されます。

編集：

ブートストラップ4では、img-fluidクラスを追加するだけです

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

私は同じ問題に直面し、この方法で解決しました。画像以外のコンテンツをカルーセルに挿入して、使用できるようにすることができます。最初にdiv.inner-item（中央揃えにする場所に）を挿入してから、このdiv内に画像を挿入する必要があります。

これが私のコード（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>

そして私のcss-code（.scss）：

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

一方でvekozlovの答えはあなたのイメージを中央にブートストラップ3で動作しますカルーセルが縮小されたとき、それが解除されます：イメージはカルーセルでスケールダウンするのではなく、そのサイズを保持します。

代わりに、これをトップレベルのカルーセルで実行しdivます。

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

これにより、カルーセル全体が中央に配置され、画像の幅（900 pxなど、設定したいもの）を超えて拡大するのを防ぎます。ただし、カルーセルが縮小されると、画像もそれに合わせて縮小されます。

もちろん、このスタイル情報をCSS / LESSファイルに入れてください。

Bootstrap 4ではmx-auto、imgタグにクラスを追加できます。

たとえば、画像の幅が75％の場合、次のようになります。

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

ブートストラップは自動的に次のように変換さmx-autoれます：

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

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

それはあなたのスタイルと関係があるかもしれません。私の場合、親の "item" div内のリンクを使用しているため、次のようにスタイルシートを変更する必要がありました。

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

既存のブーストラップコード：

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

そして私の画像は次のようになります：

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

私は解決策を持っていると思います：

個人のスタイルシートページで、画像の寸法に合わせて幅と高さを割り当てます。

その上部のdivに、スパンのあるスペースを適切に追加する別の「クラス」を作成します...（以下に表示）

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

bootstrap.cssに触れずに、独自のスタイルシートで「カルーセル」（または選択したラベル）を呼び出して、元のpixの幅と高さを一致させます。

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

}

私の場合、カルーセルに使用する320x200の小さな画像を使用しています。おそらくbootstrap.cssには事前設定された寸法がありますが、私はそれを変更したくないので、将来のリリースで最新の状態を保つことができます。これがお役に立てば幸いです~~

私もあなたと同じ問題に直面しています。@thulihaのヒントに基づいて、次のコードで私の問題が解決しました。

でhtml、ファイル、次のサンプルのように変更します。

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

でcarousel.css、クラスを変更します。

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

これを試して

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

画像の幅はspan6とまったく同じ460pxですか？私の場合、画像サイズが異なるため、画像に高さ属性を設定して、画像の高さがすべて同じで、カルーセルが画像間でサイズ変更されないようにしています。

あなたのケースでは、高さを設定して、この高さとカルーセル内部divの幅の比率が画像のアスペクト比と同じになるようにしてください

@Art L. Richardsの解決策はうまくいきませんでした。現在bootstrap.cssで、元のコードは次のようになっています。

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

@ rnaka530のコードは、ブートストラップの流動的な機能を壊します。

良い解決策はありませんが、修正しました。ブートストラップのカルーセルの例を非常に注意深くhttp://twitter.github.com/bootstrap/javascript.html#carouselで観察しました。

imgの幅はグリッドの幅よりも大きくなければならないことがわかりました。ではspan9、幅は870pxまでなので、870pxより大きい画像を準備する必要があります。imgの外側にコンテナーがある場合は、すべてのコンテナーに境界線またはマージンがあるため、幅の狭いイメージを使用できます。

カルーセルの場合、すべての画像の高さと幅はまったく同じである必要があると思います。

また、ブートストラップからスキャフォールディングページに戻って参照すると、span16 = 940pxと確信しています。これを念頭に置いて、私はあなたが

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

したがって、はい、行内のスパンスペースを設定するときは注意する必要があります。画像の幅が大きすぎると、divが次の "行"に送信されてしまい、面白くないからです：P

リンク1

カルーセルがあるcss親divクラスにこれを挿入します。

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