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% 和高度自动，所以当我最小化屏幕时，图像也会失去宽度和高度，这样它就不会扭曲图像但是当我这样做时，我在旋转木马下面的所有内容都留在原地创造了一个巨大的轮播与其下方的内容之间的间隙。我只是在旋转木马下面的跨度 4 中排列了 3 段，没什么特别的。我一直试图找出为什么它已经这样做了一段时间了，我有点接近了。.carousel项目 {}保持原位，而.carousel img{}减少。所以换句话说，我把那个.carousel item {}有 550px 的高度，我认为即使这是图像的高度，我也搞砸了，所以我尝试将 height auto 或 max-height:550px 放置，但这只会使 caorusel 中的整个图像消失。就像轮播下面的内容没有响应，我不知道为什么。我有所有的 twitter 引导资产链接，什么没有。

在此处输入图像描述

4

2 回答 2

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 回答
1

我遇到了同样的问题。

经过 3 天的折磨，我意识到只需从轮播项目中删除高度声明就可以了。只需删除对高度的任何引用！

修复的实时示例：http: //s91288.gridserver.com/port/index_test.html

于 2014-01-30T15:09:19.493 回答