ブートストラップのカルーセルを中央と応答性の両方にしますか？

Question

カルーセル画像を中央に（横に）表示したいのですが、これはデフォルトではありません。解決方法はthis topicです。

ただし、このソリューションを使用すると、カルーセルのサイズが変更され、イメージよりも小さくなると、デフォルトでスケーリングの代わりにイメージが切り取られます。

どのように画像を中央に置いても、カルーセルアイテムに引き伸ばすことができますか？

Answer 1

異なるサイズの画像があるとします。このような何かをしようと、これが原因変数高みへ「ジャンプ」...それを解決するために作成されます

/*CSS*/ 
div.c-wrapper{ 
    width: 80%; /* for example */ 
    margin: auto; 
} 

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{ 
width: 100%; /* use this, or not */ 
margin: auto; 
} 

<!--html--> 
<div class="c-wrapper"> 
<div id="carousel-example-generic" class="carousel slide"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://placehold.it/600x400"> 
     <div class="carousel-caption"> 
     hello 
     </div> 
    </div> 
     <div class="item"> 
     <img src="http://placehold.it/500x400"> 
     <div class="carousel-caption"> 
     hello 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/700x400"> 
     <div class="carousel-caption"> 
     hello 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
    <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
    <span class="icon-next"></span> 
    </a> 
</div> 
</div> 

私はこの自分自身をテストし、あなたが（適切常に中心に、画像の幅を）説明するように、それは動作します：Select the tallest image of a list

または、media-queryを使用して固定高さを設定します。

Answer 2

カルーセルの画像に幅を％で表示してみますか？

.item img { 
    width:100%; 
} 

Answer 3

この

.carousel .item img { 
    left: -9999px; /*important */ 
    right: -9999px; /*important */ 
    margin: 0 auto; /*important */ 
    max-width: none; /*important */ 
    min-width: 100%; 
    position: absolute; 
} 

を追加し、もちろん親のdivの一つが位置持っている必要があります：相対して、私はそれがデフォルトでないと考えています。

は、ここでそれを参照してください：http://paginacrestinului.ro/

Answer 4

は、CSSでmargin: 0 autoを適用し、カルーセルhtmlコードで各画像にクラスを追加します。 （ブートストラップ3上及び4）今

Answer 5

その単純：CMSを使用している間

.carousel-inner img { 
    margin: auto; 
} 

Answer 6

はこれに非常によく似た問題を抱えていたが、それは上記の溶液を解決していませんでした。私はそれを解決するためにやったことは、適用CSSで次のように置かれた：

background-size: cover 

とブートストラップを使用している場合の配置の目的のために、私が使用：

background-position: center center /* or whatever position you wanted */ 

Answer 7

私は内部<div class="carousel" id...>を配置しましたクラスコンテナ（<div class="container"><div class="carousel" id="my-carousel">...</div></div>）と別のdiv。それもそれを解決しました。

Answer 8

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

この簡単な解決策は、ブートストラップ3でこれを使用することにより、私

Answer 9

のために働い：ブートストラップV4で

#carousel-example-generic{ 
    margin:auto; 
} 

Answer 10

、私はセンターと使用して画面にカルーセルIMGを埋める

<img class="d-block mx-auto" max-width="100%" max-height="100%"> 

親要素の高さまたは幅を設定する必要があるかどうかを確認するには

html,body{height:100%;} 
.carousel,.carousel-item,.active{height:100%;} 
.carousel-inner{height:100%;} 

Answer 11

Boostrap 4では、カルーセル画像クラスにmx-autoを追加するだけです。

<div class="carousel-item"> 
    <img class="d-block mx-auto" src="http://placehold.it/600x400" /> 
</div> 

所望によりbootstrap carousel documentationからのサンプルと組み合わせる。