固定高度的Bootstrap轮播:根据图像尺寸水平或垂直居中图像

Question

我有一个固定高度的自举旋转木马.这是CSS:

.carousel-custom .carousel-outer {
  position: relative;
}


@media(min-width: 992px){
    .carousel-custom {
      margin-top: 20px;

    .carousel-inner {
      height: auto;
    .item {
        height:500px;
        line-height:300px;
      }
    }
  }
}

@media(max-width: 991px){
.carousel-custom {
      margin-top: 20px;

    .carousel-inner {
      height: auto;
    .item {
        height:300px;
        line-height:300px;
        text-align:center;

      }
    }
  }
}

这是我的标记:

    <div id="carousel-custom-1188" class="carousel slide carousel-custom" data-ride="carousel">
      <div class="carousel-outer">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459261752/w8edcuvz1yl3uc4g4o34.jpg" alt="Jinallzupvfazqqr67nd">
              <div class="carousel-caption"></div>
            </div>
            <div class="item">
              <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459175684/w4ueot8o49dh2fyulv0x.jpg" alt="K1yov5hpur8mgsb9r15p">
              <div class="carousel-caption"></div>
            </div>
            <div class="item">
              <img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459178926/fwlmuroj2wlz7czrsha0.jpg" alt="Lqfandhmutdkppjrl932">
              <div class="carousel-caption"></div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-custom-1188" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-custom-1188" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>

        <!-- Indicators -->
        <ol class="carousel-indicators  mCustomScrollbar">
            <li data-target="#carousel-custom-1188" data-slide-to="0" class="active">
              <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png" alt="Jinallzupvfazqqr67nd">
            </li>
            <li data-target="#carousel-custom-1188" data-slide-to="1" class="">
              <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png" alt="K1yov5hpur8mgsb9r15p">
            </li>
            <li data-target="#carousel-custom-1188" data-slide-to="2" class="">
              <img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png" alt="Lqfandhmutdkppjrl932">
            </li>
        </ol>
      </div>
    </div>

问题是我的图像非常宽,其他图像非常窄而且很高,而其他图像在同一个转盘中具有良好的日粮高度/宽度.

我希望将宽图像垂直居中(宽度为100%),水平居中的高图像(高度为100%)和"正常"图像(高度/宽度比例适中)填充所有旋转木马.

这是我正在尝试做的事情(第一个图像是一个非常宽的图像的例子,第二个图像具有非常高的图像,最后一个图像具有"体面"比率).

我怎么能实现这个目标？我试过Make Bootstrap的Carousel既有中心又有响应能力？和谷歌上发现的其他技巧但没有一个这样做.

Answer 1

由于.item元素是相对定位的,因此您可以img绝对定位元素.赋予.item元素固定的高度,有助于垂直和水平对齐内部图像.

我确信有很多不同的方法可以做到这一点,这是一个例子.希望能帮助到你.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  background-color: black;
}

.carousel-inner > .item {
  height: 100vh;
}

.carousel-inner > .item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 800px;
  width: auto;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- inner -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/1200x600/2c3e50/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x1200/d35400/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x600/c0392b/000" alt="">
      </div>
    </div>

    <!-- controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    
  </div>

</div>