1

わかりましたので、シンプルなカルーセルがあります

<div id="myCarousel" class="carousel slide"> 
      <div class="carousel-inner">
        <div class="item active">
          <img src="img/Kids.jpg" alt="">
          <div class="container">

          </div>
        </div>
        <div class="item">
          <img src="../assets/img/examples/slide-02.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Learn more</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="../assets/img/examples/slide-03.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div><!-- /.carousel -->

レスポンシブにするためのcssを使用して、画像が歪まないようにします

.container-fluid{ 
                    padding:0px;
                  margin:0px;
                  }
    .carousel {
      margin-bottom: 60px;
      margin-top:-16px;
    }

    body{
                  padding:0px;
                  margin:0px;
                 }

    .carousel .container {
      position: relative;
      z-index: 9;
      width:100%;
    }

    .carousel-control {
      height: 80px;
      margin-top: 0;
      font-size: 120px;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
      z-index: 10;
    }

    .carousel .item {
    height:550px;
    }
    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
        width: 100%;
        height:auto;
    }

    @media (max-width: 979px) {

        body{
                  padding:0px;
                  margin:0px;
                 }

      .carousel .item {
        height: 350px;
      }
      .carousel img {
        width: 100%;
        height:auto;
      }

    }


    @media (max-width: 767px) {

              body{
                  padding:0px;
                  margin:0px;
                 }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 350px;

      }
      .carousel img {
        width: 100%;
        height:auto;
      }
    @media (max-width: 470px) {
    .carousel img {
        width: 100%;
        height:auto;
      }
    }

今、幅100％と高さの自動を行ったので、画面を最小化すると、画像が歪まないように画像の幅と高さも失われますが、それを行うと、カルーセルの下にあるすべてのコンテンツが所定の位置にとどまり、aaを巨大に作成しますカルーセルとその下のコンテンツの間のギャップ。カルーセルの下のスパン 4 に 3 つの段落が並んでいるだけで、特別なことは何もありません。iv しばらくの間、なぜこれを行っているのかを突き止めようとしてきましたが、少し近づいてきました。.carousel アイテム {}はそのまま残りますが、.carousel img{}は減少します。つまり、.carousel アイテム {}高さが550pxで、画像の高さでさえ台無しにしたと思うので、height autoまたはmax-height:550pxを入れようとしましたが、それはカルーセルの画像全体を消すだけでした. カルーセルの下のコンテンツが応答していないようで、その理由がわかりません。すべての Twitter ブートストラップ アセットがリンクされていますが、リンクされていないものもあります。

ここに画像の説明を入力

4

2 に答える 2

1

私は同じ問題を抱えていました。

3 日間の苦痛の後、カルーセル アイテムから高さのステートメントを削除するだけでうまくいくことに気付きました。高さへの参照を削除するだけです。

修正の実例: http://s91288.gridserver.com/port/index_test.html

于 2014-01-30T15:09:19.493 に答える
1

次の CSS を使用できます。

.carousel-inner > .item > a > img {
    display: block;
    height:auto;  
    max-width: 100%;
    min-width: 100%;
    line-height: 1;
}
于 2013-12-26T16:57:14.550 に答える