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

我制作了一个由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>  

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

幻灯片1：

幻灯片2：

幻灯片3：

---

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

您需要使用照片编辑器以相同的分辨率制作滑块的所有图片，但如果无法更改图片的分辨率

---

尝试将

max width

和

max height

替换为

width

和

height

，您需要使用照片编辑器将滑块的所有图片设置为同一分辨率，但如果无法更改图片的分辨率

---

尝试放置

最大宽度

和

最大高度

而不是

宽度

和

高度

原始图像的大小是多少？在我看来，它们具有不同的纵横比，因此最后一张图像变得“太大”

一个快速修复方法是使用类似于Photoshop或GIMP的工具将所有图像裁剪成相同大小

当然，还有一种方法可以使用CSS裁剪它们。您的CSS中可能有输入错误，因为您似乎想编写

.carousel-inner>.item>img

（在carousel和inner之间使用破折号而不是

---

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

原始图像尺寸是多少？在我看来，它们具有不同的纵横比，因此最后一张图像变得“太大”

一个快速修复方法是使用类似于Photoshop或GIMP的工具将所有图像裁剪成相同大小

当然，还有一种方法可以使用CSS裁剪它们。您的CSS中可能有输入错误，因为您似乎想编写

.carousel-inner>.item>img

（在carousel和inner之间使用破折号而不是

---

---

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

原始图像尺寸是多少？在我看来，它们具有不同的纵横比，因此最后一张图像变得“太大”。一个快速修复方法是使用类似于Photoshop或GIMP的工具将所有图像裁剪成相同大小。当然，还有一种方法可以使用CSS裁剪它们。此外，您的CSS中可能有输入错误，因为您似乎想编写

.carousel-inner>.item>img

（在carousel和inner之间使用破折号而不是.dash）@dlaxar，但这些是来自JSON数据的图像，我无法使用photoshop。我应该在CSS中做些什么更改。你是否尝试过我建议的CSS编辑？@dlaxar我已经按照你说的做了更改，但现在它不会自动循环。为什么会发生这种情况。@dlaxar请添加你的答案（我已对你的评论投了赞成票，将其添加为你的答案）。我想向你投票，因为你已经解决了我的问题。谢谢。原始图像的大小是多少？在我看来，它们具有不同的纵横比，因此最后一张图像变得“太大”。一个快速修复方法是使用类似于Photoshop或GIMP的工具将所有图像裁剪成相同大小。当然，还有一种方法可以使用CSS裁剪它们。此外，您的CSS中可能有输入错误，因为您似乎想编写

.carousel-inner>.item>img

（在carousel和inner之间使用破折号而不是.dash）@dlaxar，但这些是来自JSON数据的图像，我无法使用photoshop。我应该在CSS中做些什么更改。你是否尝试过我建议的CSS编辑？@dlaxar我已经按照你说的做了更改，但现在它不会自动循环。为什么会发生这种情况。@dlaxar请添加你的答案（我已对你的评论投了赞成票，将其添加为你的答案）。我想向您投票，因为您已经解决了我的问题。谢谢。我正在使用jquery中的

attr（）

将imageURL设置为

src=“”

，正如dlaxar所说，我已经完成了，但现在旋转木马不会自动循环。您的意思是需要单击“下一张/上一张”来查看下一张图像吗？是的，我需要单击它。我已按照dlaxar的说明进行了必要的更改，但现在它不会自动滑动。感谢您的帮助，我已修复了此问题。请尝试通过Jquery而不是data ride=“carousel”use$（“#myCarousel”）。carousel（），另外，我正在使用jquery中的

attr（）

将imageURL设置为

src=”“

，正如dlaxar所说，我已经这样做了，但现在carousel不会自动循环。你的意思是你需要单击next/previouse来查看下一幅图像吗？是的，我需要单击它。我已按照dlaxar的说明进行了必要的更改，但现在它不会自动滑动。感谢您的帮助，我已修复了此问题。请尝试通过Jquery而不是data ride=“carousel”use$（“#myCarousel”）。carousel（），也

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