9

デフォルトの Bootstrap イメージ カルーセルを拡張して、動的サイズのイメージ (最大 500x400) をサポートし、水平方向と垂直方向の両方を中央に配置しようとしています。さらに、キャプションを画像の下部に固定し、キャプション div を画像全体に完全に拡張する元のキャプション レイアウトを維持したいと思います (ただし、それ以上ではありません)。

デフォルトの Bootstrap セットアップのかなりクリーンな実装であるフィドルをまとめました (css セクションの最後に 4 つの追加スタイルしかありません)。

http://jsfiddle.net/rdugan/JFBFU/26/

画像とキャプションの周囲に「インライン」div を追加し、親で「text-align: center」を使用することで、水平方向のセンタリングとキャプションの要件をかなり簡単に達成できます。ただし、垂直方向のセンタリングには問題が残ります (いつものように)。

別の方法として、さまざまな div で 'display: table-cell' (およびそれに付随するセンタリング スタイル) を使用してさまざまな結果を得ることも試みました。キャプションのアンカーが失われます。

ヒントがあれば大歓迎です-かなり長い間、これについて頭を悩ませてきました。

4

3 に答える 3

17

次のルールを使用して、水平方向に中央揃えにすることができます。

.carousel-inner { text-align: center; }

.carousel .item > img { 表示: インラインブロック; }

垂直方向の配置については、これを確認する必要があります: http://www.student.oulu.fi/~laurirai/www/css/middle/

また、サイズ変更時に画像の縦横比を維持するには、一度に両方ではなく画像の幅または高さのみを変更するだけで、元の比率でサイズ変更されます。

于 2012-04-21T10:57:24.733 に答える
5

カルーセル アイテムを含む div で CSS background プロパティを直接使用します。

*.html で:

<div class="item" style="background-image: url('[path-to-image].png')">
    <!-- omit the <img> tag -->
    <!-- the rest of the stuff that was in the <div> goes here -->
</div>

*.css:

.carousel .item {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

ただし、これはカルーセル ナビゲーションの矢印を壊すようです。

于 2012-12-31T08:54:30.007 に答える
0

このスニペットを使用してみてください

.carousel-inner > .item > img {
    min-width: 100%;
}
于 2016-03-02T15:50:31.553 に答える