36

カルーセル画像を中央 (水平) に配置したいのですが、これはデフォルトではありません。このトピックの解決策に従います。

ただし、このソリューションを使用すると、カルーセルのサイズが変更されて画像よりも小さくなると、デフォルトのスケーリングではなく、画像がトリミングされます。

画像を中央に配置しながら、カルーセル アイテムに引き延ばすにはどうすればよいですか?

4

13 に答える 13

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

この簡単な解決策は私のために働いた

于 2016-01-13T18:41:45.570 に答える
3

これを追加

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

そしてもちろん、親 div の 1 つに position:relative が必要ですが、デフォルトではそうなっていると思います。

こちらをご覧ください：http: //paginacrestinului.ro/

于 2014-03-22T19:02:07.070 に答える
3

カルーセル HTML コードの各画像にクラスを追加してから、css apply を使用しますmargin: 0 auto。

于 2014-10-22T07:02:42.753 に答える
0

ブートストラップv4では、カルーセル画像を中央に配置して画面に塗りつぶします

<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%;}
于 2016-11-21T05:09:45.030 に答える
0

カルーセル内の画像に幅を % で指定してみてください。

.item img {
    width:100%;
}
于 2013-10-25T06:54:01.637 に答える