19

これは些細な質問のように思えますが、Twitter Bootstrap カルーセルの例 ( http://twitter.github.io/bootstrap/examples/carousel.html ) を数時間いじった後、SO に助けを求めました。

カルーセルに（現在のように）全幅を表示させたいのですが、高さを切り取ってはいけません。さまざまなコンテナーで min-height、height などを 100% に設定しようとしましたが、結果は得られませんでした。2セント？

4

6 に答える 6

8

ブートストラップ サイトのカルーセルの例から、ブラウザー ウィンドウのサイズを変更すると、画像が実際に x 軸で引き伸ばされていることがわかります。同じ効果を実現するには、CSS を使用します。

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

最後の 2 つの属性、最小幅と高さは重要です。高さは、カルーセルの目的のサイズに設定されます。

最後に、背景画像ではなく img タグを使用して画像を配置します。より完全な例を次に示します。

<div class="item">
    <img src="image.jpg" />
    <div class="container">
        <div class="carousel-caption">
            <h1>Header</h1>
            <p class="lead">This is a caption</p>
            <a class="btn btn-large btn-primary" href="#">Large Button</a>
        </div>
    </div>
</div>

これが役立つことを願っています。乾杯！

于 2013-05-08T11:06:47.260 に答える
1

簡単な CSS の変更で解決策が得られたと思いますか? 以下を (OLD) から; に変更するだけです。

    .carousel {
  /*height: 500px; OLD*/
  /*margin-bottom: 60px; OLD*/

  /*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/
  margin:0 auto 60px;
}

.carousel .item {
    /*height: 500px; OLD*/
    /*background-color: #777; OLD*/

    width:100%;
    height:auto;
}
.carousel-inner > .item > img {
  /*position: absolute; OLD+WHY?*/
  /*top: 0; OLD+WHY?*/
  /*left: 0; OLD+WHY?*/

  min-width:100%;
  height:auto;
}
于 2014-09-10T04:57:00.880 に答える
1

スライドに挿入する各画像に対して次を使用します。

<img class="img-responsive center-block" src="#">
于 2015-03-06T20:09:45.083 に答える