Question

我将轮播设置为.css中的某个大小，并且希望轮播中的图片相应地适合于set参数。但是，一旦经过设置的轮播边框，图片就会被剪切掉。

我已经尝试过就此主题发布的所有内容，但都没有成功。

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%;
}

图像只是在轮播边框的底部出现。我希望它们适合我的设定边界并自动裁剪或缩放以适合。

如何让图片适合我的自举轮播中的框架？

0 个答案: