Question

我制作了一张3张幻灯片的旋转木马。当它循环到第三张幻灯片时，它会放大并重叠。前两张幻灯片有效但不是最后一张幻灯片。

我的代码：

<div class="col-md-8">
            <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="1"></li>
                </ol>

                <!-- Wrapper for slides-->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="" alt="myimage1" style="width: 100%">
                        <div class="carousel-caption">
                            <h3>Your news title</h3>
                            <p>news in short</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="" alt="myimage2" style="width: 100%">
                        <div class="carousel-caption">
                            <h3>Your news title</h3>
                            <p>news in short</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="" alt="myimage3" style="width: 100%">
                        <div class="carousel-caption">
                            <h3>Your news title</h3>
                            <p>news in short</p>
                        </div>
                    </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>
        </div>

在css中：

.carousel.inner > .item > img {
    width: 640px;
    height: 360px;
}

以下是更多说明的屏幕截图：

幻灯片1：

幻灯片2：

幻灯片3：

在第三张幻灯片中，您可以看到图像被放大，前两张幻灯片的尺寸非常完美。我该如何解决这个问题。

Answer 1

你需要使用照片编辑器以相同的分辨率制作滑块的所有图片但是如果你不能改变图片的分辨率尝试将lib index.js (es5) components App.js (es5) Widget.js (es5) bundles bundle.js (es5)和max-width代替max-height和width

Answer 2

原始图片尺寸是多少？在我看来，他们有不同的宽高比，因此最后的图像变得太大＆＃34;。

快速解决方法是使用类似于Photoshop或GIMP的工具将图像裁剪为具有相同尺寸的图像。

然后，当然，有一种方法可以使用CSS裁剪它们。您的CSS中可能存在拼写错误，因为您似乎打算写.carousel-inner > .item > img（在转盘和内部之间使用短划线代替。）

（这是根据@rock stone的要求从评论中复制和编辑的）

我的旋转木马在循环到第三张幻灯片时会放大和缩小？

2 个答案: