web-dev-qa-db-ja.com

Twitter Bootstrap：カルーセル画像の幅と高さを完全に揃える

これはささいな質問のように思えますが、数時間後にTwitter Bootstrapカルーセルを例にいじっています（ http://Twitter.github.io/bootstrap/examples/carousel .html ）私はSOに助けを求めています。

カルーセルに（現在のように）全幅を表示したいが、高さはトリミングされていません。別のコンテナで最小高さ、高さなどを100％に設定しようとしましたが、結果はありません。 2セント？

twitter-bootstrapcarousel
18
Lasse

Bootstrap 3の場合、必要なものは次のとおりです。

.carousel img {
    min-width: 100%;
}
17
Nate Beers

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

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

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

最後に、背景画像ではなく、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>

これがお役に立てば幸いです。乾杯！

7
Julian Soro

スライドに挿入する画像ごとに次を使用します。

<img class="img-responsive center-block" src="#">
1
Becky

これは3年前に遡りますが、Bootstrap 3.3.7

その理由は、 'max-width'が幅がmax-widthよりも大きい場合にwidthプロパティをオーバーライドする要素の最大幅を設定するためです。

また、「最小幅」は常に「最大幅」をオーバーライドします。

Codepenでは例です。プレビューウィンドウのサイズを変更して、動作を確認します。

特に、可能な限り最小の幅にサイズ変更して以下の要素をチェックし、他の2つの要素i1およびi2と比較します。

<div class="i3">Sample</div>
1
skay

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;
}
1
Kerry Smyth