调整窗口大小时居中引导轮播图像答案

【问题标题】：Center Bootstrap Carousel images when window is resized调整窗口大小时居中引导轮播图像
【发布时间】：2016-07-17 13:34:21
【问题描述】：

我见过很多类似的问题，但解决方案并不适用。

我正在尝试制作一个 Bootstrap 轮播，以便在调整窗口大小时，图像保持居中，同时还保持所需的图像高度和最小 100% 宽度属性。

这个有点难解释，不过你可以在http://www.lyft.com看到类似的概念

我在codepen 上复制了一个类似的问题，您可以看到，如果您将窗口缩小到移动设备的大小，图像将保持固定，最终您看到的是图像的左上角（通常是云或一些无法识别的模糊）。

我正在尝试让该图像向左移动并在水平视图缩小时保持居中，以便图像保持相关性。

我的其他轮播样式：

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
  overflow: hidden;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: relative;
  top: 0;
  left: 0;
  min-width: 100%;  
  max-width: none;
  height: auto;  
}
.carousel-inner img{
    margin: auto;
}

#mycarousel{
    position: relative;
    top: 0;
}

还有简单的轮播：

<div id="mycarousel" class="carousel slide" data-ride="carousel">
  <!-- 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>
    <li data-target="#mycarousel" data-slide-to="3"></li>
    <li data-target="#mycarousel" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
    </div>
    <div class="item">
      <img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
    </div>
    <div class="item">
      <img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
    </div>
    <div class="item">
      <img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
    </div>
    <div class="item">
      <img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
    </div>
  </div>
</div>

【问题讨论】：

标签： html twitter-bootstrap css carousel

【解决方案1】：

我根据您在帖子中链接的 lyft 网站制定了解决方案。我把你的 img 变成了 div 并使用了背景图片，然后适当地设置了样式。

 <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=397');" data-color="lightblue" alt="First Image"></div>
    </div>
    <div class="item">
      <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=689');" data-color="firebrick" alt="Second Image"></div>
    </div>
    <div class="item">
      <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=675');" data-color="violet" alt="Third Image"></div>
    </div>
    <div class="item">
      <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=658');" data-color="lightgreen" alt="Fourth Image"></div>
    </div>
    <div class="item">
      <div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=638');" data-color="tomato" alt="Fifth Image"></div>
    </div>

然后删除这个.carousel-inner > .item > img并添加这个CSS：

.carousel-inner .item .item-child {
  background-position: top center;
  background-size: cover;
  position: absolute;
  bottom:0;
  top: 0;
  left: 0;
  right:0;
  width: 100%;
  height: auto;  
}

你 can see the js.fiddle here 如果你想玩它。希望对您有所帮助。

【讨论】：

【解决方案2】：

你去，最简单的修复

在图像上使用宽度而不是最小宽度

.carousel-inner > .item > img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;  
  max-width: none;
  height: auto;  
}

还可以像这样为轮播添加高度调整

.carousel .item {
  height: auto;
  background-color: #777;
}

http://codepen.io/Rohithzr/pen/WwEpgp?editors=1100

【讨论】：