Question

我正在为我的网站使用Bootstrap 4传送带。一切正常，但是现在我正在寻找一种解决方案，以将滑块图像对准轮播的中心。

当前它与左侧对齐，因此当我调整浏览器大小时，滑块图像将在右侧被剪切。我想将图像放在中间，这样图像的两面都会被剪掉。

/* SLIDER
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 0;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 30rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 40rem;
  margin: 0 auto;
}

<!-- Slider -->

          <div id="Slider" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#Slider" data-slide-to="0" class="active"></li>
              <li data-target="#Slider" data-slide-to="1"></li>
              <li data-target="#Slider" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="first-slide" src="img1.jpg" alt="First slide">
                <div class="container">
                  <div class="carousel-caption text-left">
                    <h1>Platzhalter 1</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p><a class="btn btn-lg btn-outline-warning" href="#" role="button">Jetzt buchen</a></p>
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <img class="second-slide" src="img2.jpg" alt="Second slide">
                <div class="container">
                  <div class="carousel-caption">
                    <h1>Platzhalter 2</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p><a class="btn btn-lg btn-warning" href="#" role="button">Learn more</a></p>
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <img class="third-slide" src="img3.jpg" alt="Third slide">
                <div class="container">
                  <div class="carousel-caption text-right">
                    <h1>Platzhalter 3</h1>
                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a class="btn btn-lg btn-outline-warning" href="#" role="button">Browse gallery</a></p>
                  </div>
                </div>
              </div>
            </div>
            <a class="carousel-control-prev" href="#Slider" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Zurück</span>
            </a>
            <a class="carousel-control-next" href="#Slider" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Vor</span>
            </a>
          </div>

Example

Answer 1

尝试添加这些CSS规则

.carousel-item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  height: 40rem;
  margin: 0 auto;
}

但是要获得更多帮助，我们需要有关您尝试过的内容以及问题摘要中提到的有效代码段的信息。

Bootstrap Carousel图片定位中心

1 个答案: