html - 具有固定高度 : center image horizontally or vertically based on image dimensions 的 Bootstrap 旋转木马

Question

我有一个高度固定的 Bootstrap 轮播。这是 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's Carousel both center AND responsive?和在谷歌上发现的其他技巧，但没有人这样做。

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>