如何使轮播响应？

Question

我正在使用以下代码制作具有垂直图像的轮播。它没有响应，即它在桌面上工作得很好，但在减小屏幕尺寸时，图像不完全可见（即图像的一半在轮播中不可见）。

如何消除这个错误？

<div class="container ">
   <div class="col-md-offset-1 col-md-11 col-sm-2 col-xs-12">
      <div id="carousel-pager" class="carousel slide " data-ride="carousel" data-interval="1000">
         <div class="carousel-inner vertical">
            <div class="active item" style="object-fit: fill;">
               <img  style="object-fit: fill;" src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="0" width:100>
            </div>
            <div class="item" style="object-fit: fill;">
               <img src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="1">
            </div>
            <div class="item" style="object-fit: fill;">
               <img src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="2">
            </div>
         </div>
         <a class="left carousel-control" href="#carousel-pager" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
         </a>
         <a class="right carousel-control" href="#carousel-pager" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
         </a>
      </div>
   </div>
</div>

Answer 1

你可以试试这个：

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

我已经添加了 min-width: 100%; 来使图像占据整个容器。

Answer 2

您正在使用 bootstrap，您应该添加类：d-block 和 mx-auto 以响应所有 img 标签。

像这样：

<img src="..." class="d-block mx-auto" data-target="#carousel-main" data-slide-to="2">

这会让他们有反应。

来源：https://getbootstrap.com/docs/4.0/components/carousel/

也把所有的divclass="item"改成div class="carousel-item"

或者使用这个：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

如何使轮播响应？

How to make carousel responsive?

css

frontend

carousel

vue.js

bootstrap-4