Question

这是我的代码：

<style>
  .carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 510px;
    max-width: none;
  }
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div style="background-color: red;" class="slider col-lg-10">
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img class="first-slide img-responsive center-block" src="assets/img/underconstruction.jpg" alt="First slide">
        <div class="container">
          <div class="carousel-caption">
            <h1>Example headline.</h1>
            <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
          </div><!-- carousel-caption -->
        </div><!-- container -->
      </div><!-- item active -->
      <div class="item">
        <img class="second-slide" src="assets/img/underconstruction.jpg" alt="Second slide">
        <div class="container">
          <div class="carousel-caption">
            <h1>Another example headline.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
          </div><!-- carousel-caption -->
        </div><!-- container -->
      </div><!-- item -->
      <div class="item">
        <img class="third-slide" src="assets/img/underconstruction.jpg" alt="Third slide">
        <div class="container">
          <div class="carousel-caption">
            <h1>One more for good measure.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
          </div><!-- carousel-caption -->
        </div><!-- container -->
      </div><!-- item -->
    </div><!-- carousel-inner -->
  </div><!-- slider col-lg-10 -->

  <div data-target="#myCarousel" data-slide-to="0" style="background-color: blue;" class="tabs-vertical col-lg-2 visible-lg">TAB 1</div>
  <div data-target="#myCarousel" data-slide-to="1" style="background-color: yellow;" class="tabs-vertical col-lg-2 visible-lg">TAB 2</div>
  <div data-target="#myCarousel" data-slide-to="2" style="background-color: cyan;" class="tabs-vertical col-lg-2 visible-lg">TAB 3</div>

  <div data-target="#myCarousel" data-slide-to="0" style="background-color: blue;" class="tabs-horizontal col-xs-4 hidden-lg">TAB 1</div>
  <div data-target="#myCarousel" data-slide-to="1" style="background-color: yellow;" class="tabs-horizontal col-xs-4 hidden-lg">TAB 2</div>
  <div data-target="#myCarousel" data-slide-to="2" style="background-color: cyan;" class="tabs-horizontal col-xs-4 hidden-lg">TAB 3</div>
</div><!-- carousel slide -->

我设法在宽屏上显示： enter image description here

这在狭窄的屏幕上： enter image description here

如果仔细观察，窄屏幕中的图像在中心没有正确对齐，则会将其放在左侧。我想让它成为中心。

而且我也无法使图像填满所有空间，但仍有一些红色区域，这意味着它没有填满。

请帮助，我花了几个小时的研究，但仍然一无所获。

我看到一些保证金解决方案，但没有帮助。

我试图设置宽度，它居中但不会填充旋转木马的顶部和底部。而且它在狭窄的屏幕上变得很小。

Answer 1

您可以将图片设置为background-image的css div，而不是使用img标记。然后设置background-size: cover;：

div {
  background-image: url(path/to/img/relative/to/css);
  background-size: cover;
  background-position: 50%;
}

这种方法的缺点是你需要指定div的宽度和高度，但是你使用的任何图像都会填充它，所以它应该是一个问题。

以下是一个例子： http://jsbin.com/jayacopoga/1/edit?html,css,js,output

Answer 2

Bootstrap Carousel图像居中，适用于Bootstrap 3和4-alpha。所需要的只是将样式text-align:center;添加到您希望居中的轮播项目div。其他人将与左边对齐。

这使图像居中并且不会改变其大小。如果您需要使用图像填充整个轮播面板，只需将图像宽度更改为100％，它就会填充并居中（请参阅下面的代码中的第三张图片）。

这是直接来自Bootstrap 4 alpha的轮播示例。额外的样式是图像居中所需的全部（在这种情况下将'center'类添加到carousel-item div），并且可以使用各种方法实现。

http://v4-alpha.getbootstrap.com/components/carousel/

<style> .center { text-align:center; } </style>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <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>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active center">
      <img src="http://placeimg.com/200/200/tech" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="http://placeimg.com/200/200/nature" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img style="width:100%;" src="http://placeimg.com/200/200/people" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" 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="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Bootstrap Carousel Image不会水平对齐中心

2 个答案: