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

时间：2016-03-28 13:53:06

标签： html css image twitter-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％）和“普通”图像（高度/宽度比例适中）填写所有的旋转木马。

这是我正在尝试做的事情（第一张图片是一张非常宽的图片的例子，第二幅图片的图片非常高，而最后一张图片的图像比例很高）。

Image very wide

Image very high

Image with decent ration

我怎么能实现这个目标？我已尝试Make Bootstrap's Carousel both center AND responsive?以及在Google上发现的其他技巧，但没有人这样做过。

4 个答案:

答案 0 :(得分：22)

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

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

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

好吧，我一直在摆弄一段时间。结束以下结果。希望它有助于回答你的问题（至少在很小的一部分）。

<head>
    <title>Bootstrap Carousel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
    html,
    body {
        height: 100%;
    }

    .carousel,
    .item,
    .active {
        height: 100%;
    }

    .carousel-inner {
        height: 100%;
    }

    /* Background images are set within the HTML using inline CSS, not here */

    .fill {
        width: 100%;
        height: 100%;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }

    footer {
        margin: 50px 0;
    } 

    .tester {
        height: 100%;
    }
    </style>
</head>
<body>
    <div class="tester">
    <!-- Full Page Image Background Carousel Header -->
    <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png');"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </header>
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>
    </div>
</body>

再次，希望它有所帮助！

答案 2 :(得分：0)

如果滑块高度固定，

只需在绝对值上使用图像

<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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="middle">
        <img src="http://placehold.it/1920x500">
      </div>
    </div>
    <div class="item">
      <div class="middle">
        <img src="http://placehold.it/1920x300">
      </div>
    </div>
    <div class="item">
      <div class="middle">
        <img src="http://placehold.it/600x900">
      </div>
    </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>

CSS 

.carousel {
  width: 500px;  /*test width*/
  height: 300px; /*what ever height */
}

.middle {
  position: relative;
  height: 300px; /*what ever height */
}

.middle img {
  max-width: 100%;
  max-height: 100%; /*what ever height */
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

请参阅fiddle

答案 3 :(得分：-3)

如果你试图在bootstrap轮播中实现这一点，你最终会在顶部和底部出现黑条...我遇到了类似的问题并最终使用了“flickity”js库..它比tryig更好用在不适合这种情况的事情上实现这一目标....

相关问题
最新问题