Как мне разрешить картинки вписываться в заданную рамку в моей загрузочной карусели? - PullRequest
Новая
       7

Как мне разрешить картинки вписываться в заданную рамку в моей загрузочной карусели?

0 голосов
/ 14 февраля 2019

Я установил карусель на определенный размер в .css, и я хочу, чтобы изображения в карусели соответствующим образом соответствовали заданному параметру.Тем не менее, фотографии просто обрезаются после того, как они установили границу карусели.

Я перепробовал все, что было размещено в стеке по этой теме, ни одна из них не сработала.

html 

<!--Carousel-->
              <div id="myCarousel" class="carousel slide" data- 
                       ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" 
                      class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                  <div class="item active">
                    <img src="EvoX.jpg" alt="Evo X" style="width:100%;">
                  </div>

                  <div class="item">
                    <img src="xint.jpg" alt="Evo X Interior" 
                     style="width:100%;">
                  </div>

                  <div class="item">
                    <img src="MIVECtemp.jpg" alt="Evo X Engine (4b11T)" 
                     style="width:100%;">
                  </div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" data- 
                 slide="prev">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" 
                 data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            <!--Carousel-->

CSS 

.carousel-inner{
    width: 100%;
    height: 75%;
}

Изображения только обрезаются в нижней части границы карусели.Я хочу, чтобы они соответствовали моим установленным границам и автоматически обрезали или увеличивали масштаб.

...