html - 在 Twitter Bootstrap 中，当我最小化我的窗口时，我的旋转木马失去宽度和高度以平衡，这很好但随后留下了巨大的差距

Question

好的，我有一个简单的旋转木马

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

Answer 1

你可以使用这个 CSS:

.carousel-inner > .item > a > img {
    display: block;
    height:auto;  
    max-width: 100%;
    min-width: 100%;
    line-height: 1;
}