Question

我试图找到这个问题的答案：

我想使用bootstrap创建一个轮播，当用户重新调整浏览器大小时，我希望图像保持原始大小，但我也希望图像居中。怎么办呢？

这是我到目前为止的尝试：

.img-center {
  min-height: 720px;
  min-width: 1920px;
}

<div id="myCarousel" class="carousel">

  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <img src="/img/beach1.jpg" alt="beach" class="img-center">
    </div>
    <div class="item">
      <img src="/img/beach2.jpg" alt="beach" class="img-center">
    </div>
  </div>
</div>

Answer 1

将img放入div中，位置相对，溢出隐藏，100％宽度。然后将img放置在左边50％和左边距减半图像宽度（例如，Img有800px，因此减去边距应为400）。你去吧。

Answer 2

如果你想将图像阻挡到一定的高度和宽度：Bootstrap carousel是响应式的，所以最好解决它是给你的图像一个固定的高度和宽度：

.carousel-inner > .item > img{
       min-width:720px;
       min-height:1920px;
}

或

.carousel-inner > .item > img{
           width:720px;
           height:1920px;
}

全尺寸居中图像的自举旋转木马

2 个答案: