如何在 Angular-UI-Bootstrap 中缩放轮播容器大小

Question

现在轮播容器落在图像之外。

我希望轮播容器的宽度与 https://angular-ui.github.io/bootstrap/ 上示例中所示的图像相同。

这是我的 html:

<div class="offer-detail-image-div">
  <uib-carousel active="0" interval="2000" no-wrap="false" no-pause="false">
    <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
      <img class="offer-detail-image" ng-src= {{slide.image}}
    </uib-slide>
  </uib-carousel>
</div>

以及伴随的类：

.offer-detail-image {
  display: block;
  overflow: visible;
  width: auto;
  height: auto;
  max-width: 80%;
  min-width: 70%;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
  float: none;
}



 .offer-detail-image-div {
    display: block;
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
   }

Answer 1

像这样更改 css 你必须给出 100% 的宽度，而且在你的 css 中你提到了最大宽度 80%。

.offer-detail-image {
      display: block;
      overflow: visible;
      width: 100%;
      height: auto;
      margin-right: auto;
      margin-bottom: 12px;
      margin-left: auto;
      float: none;
    }

如何在 Angular-UI-Bootstrap 中缩放轮播容器大小

How do you scale the carousel container size in Angular-UI-Bootstrap

html

css

angularjs

angular-ui-bootstrap