How do you scale the carousel container size in Angular-UI-Bootstrap
<p>Right now the carousel container falls outside the image.</p>

<p><a href="https://i.stack.imgur.com/6CqCt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6CqCt.png" alt="enter image description here"></a></p>

<p>I want the carousel container to have the same width as the image as shown in the example on <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">https://angular-ui.github.io/bootstrap/</a>.</p>

<p><a href="https://i.stack.imgur.com/jwXkV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jwXkV.png" alt="enter image description here"></a></p>

<p>Here is my html:</p>

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

<p>And the accompanying classes:</p>

<pre><code>.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;
   }
</code></pre>