title: How to resize (reduce) image in carousel
body: <p>I need help to reduce a picture so it could be nicely placed into carousel.
  I made 2 pages with a slightly different carousel.</p>
  <p>In first page it is placed nicely: <a href="https://i.stack.imgur.com/1BMf5.jpg" rel="nofollow noreferrer">first carousel where picture if nicely placed</a></p>
  <p>And on a second carousel with a slightly different look it looks like this: <a href="https://i.stack.imgur.com/dICyU.jpg" rel="nofollow noreferrer">second carousel where picture is too big</a></p>
  <p>Codes for second carousel are (first CSS and second HTML)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#thumbnail-preview-indicators {
    position: relative;
    overflow: hidden;
  }
  #thumbnail-preview-indicators .slides .slide-1,
  #thumbnail-preview-indicators .slides .slide-2,
  #thumbnail-preview-indicators .slides .slide-3,
  #thumbnail-preview-indicators .slides .slide-4,
  #thumbnail-preview-indicators .slides .slide-5,
  #thumbnail-preview-indicators .slides .slide-6,
  #thumbnail-preview-indicators .slides .slide-7,
  #thumbnail-preview-indicators .slides .slide-8,
  #thumbnail-preview-indicators .slides .slide-9,
  #thumbnail-preview-indicators .slides .slide-10,
  #thumbnail-preview-indicators .slides .slide-11{
    background-size: 50%;
    background-position: center center;
    background-repeat: no-repeat;
  }
  #thumbnail-preview-indicators,
  #thumbnail-preview-indicators .slides,
  #thumbnail-preview-indicators .slides .slide-1,
  #thumbnail-preview-indicators .slides .slide-2,
  #thumbnail-preview-indicators .slides .slide-3,
  #thumbnail-preview-indicators .slides .slide-4,
  #thumbnail-preview-indicators .slides .slide-5,
  #thumbnail-preview-indicators .slides .slide-6,
  #thumbnail-preview-indicators .slides .slide-7,
  #thumbnail-preview-indicators .slides .slide-8,
  #thumbnail-preview-indicators .slides .slide-9,
  #thumbnail-preview-indicators .slides .slide-10,
  #thumbnail-preview-indicators .slides .slide-11{
    height: 480px;
  }
  #thumbnail-preview-indicators .slides .slide-1{
    background-image: url(img/AudiA3.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-2{
    background-image: url(img/AudiA3b.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-3{
    background-image: url(img/AudiA3c.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-4{
    background-image: url(img/AudiA3d.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-5{
    background-image: url(img/AudiA3e.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-6{
    background-image: url(img/AudiA3g.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-7{
    background-image: url(img/AudiA3h.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-8{
    background-image: url(img/AudiA3i.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-9{
    background-image: url(img/AudiA3j.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-10{
    background-image: url(img/AudiA3k.jpg);
  }
  #thumbnail-preview-indicators .slides .slide-11{
    background-image: url(img/AudiA3l.jpg);
  }
  #thumbnail-preview-indicators .carousel-inner .item .carousel-caption {
    top: 20%;
    bottom: inherit;
  }
  
  /* CAROUSEL INDICATORS */
  #thumbnail-preview-indicators .carousel-indicators li,
  #thumbnail-preview-indicators .carousel-indicators li.active {
    width: 102px;
    height: 69px;
  
    background-color: transparent;
    border: 1px solid white;
    border-radius: 1px;
  }
  #thumbnail-preview-indicators .carousel-indicators li.active {
    border: 1px solid red;
  }
  #thumbnail-preview-indicators .carousel-indicators li &gt; .thumbnail {
    width: 100px;
    height: 66px;
  
    overflow: hidden;
    
    opacity: 0.8;
    display: block;
    padding: 0;
    margin-bottom: 0;
    background-color: #fff;
    border: none;
    border-radius: 2px;
    transition: all 550ms ease-out;
  }
  #thumbnail-preview-indicators .carousel-indicators li:hover &gt; .thumbnail,
  #thumbnail-preview-indicators .carousel-indicators li.active &gt; .thumbnail:hover {
    position: relative;
    display: block;
    border: 1px solid white;
    opacity: 1;
    transform: scale(1.5);
    z-index: 1;
  }
  #thumbnail-preview-indicators .carousel-indicators li.active &gt; .thumbnail:hover {
    border: 1px solid red;
  }
  
  
  
  @media screen and (min-width: 480px) {
  }
  @media screen and (min-width: 768px) {
  }
  @media screen and (min-width: 1024px) {
  }
  @media screen and (min-width: 1200px) {
  }
  @media screen and (min-width: 1440px) {
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="thumbnail-preview-indicators" class="carousel slide" data-ride="carousel"&gt;
  
                  &lt;!-- INDIKATORI --&gt;
  
                  &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="0" class="active"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="1"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3b.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="2"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3c.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="3"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3d.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="4"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3e.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="5"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3g.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="6"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3h.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="7"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3i.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="8"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3j.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="9"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3k.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#thumbnail-preview-indicators" data-slide-to="10"&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;img class="img-responsive" src="img/AudiA3l.jpg"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ol&gt;
  
                  &lt;!-- KRAJ NAVIGATORA--&gt;
  
  
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="item slides active"&gt;
                          &lt;div class="slide-1"&gt;&lt;img src="img/AudiA3.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-2"&gt;&lt;img src="img/AudiA3b.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-3"&gt;&lt;img src="img/AudiA3c.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-4"&gt;&lt;img src="img/AudiA3d.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-5"&gt;&lt;img src="img/AudiA3e.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-6"&gt;&lt;img src="img/AudiA3g.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-7"&gt;&lt;img src="img/AudiA3h.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-8"&gt;&lt;img src="img/AudiA3i.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-9"&gt;&lt;img src="img/AudiA3j.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-10"&gt;&lt;img src="img/AudiA3k.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item slides"&gt;
                          &lt;div class="slide-11"&gt;&lt;img src="img/AudiA3l.jpg" alt="Audi A3"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;a class="left carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;a class="right carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So I hope that somebody knows how to fix this because I tried everythig.</p>