Javascript 更改为其他图像时，如何固定图像大小？

我正在学习如何使用CSS、HTML和Javascript进行幻灯片放映，一切似乎都很好，但当我单击“下一步”或“上一步”时，当前图像会变大，并在屏幕上停留几秒钟。我正在使用不同大小的图像，但我在CSS上添加了一个宽度->

img{width:100%；}

。这也可能与利润率有关，但这似乎不是问题所在

以下是一些可能有助于您理解问题的代码：

figure
{
    position:absolute;
    opacity:0;
    transition:1s opacity;
    margin:0;
    border-left:solid 2px black;
    border-right:solid 2px black;
}

figure.show
{
    opacity:1;
    position:relative;
    transition:1s opacity;
    margin-right:15%;
    margin-left:15%;
} 

图像和底部div之间也有一个空格。我在c9.io上执行此操作，但我没有遇到此问题，可能是codepen上的某个原因造成的吗？

---

您可以在此处查看代码：

关于图像下的间隙，它以内联方式显示：

img {
  display: block; /* this will fix bottom gap */
  width: 100%;
}

关于图像大小：

只需使用相同大小的图像即可解决您的问题。否则，请尝试使用css强制它们

figure img {width:1280px;height:960px;margin-right:15%;margin-left:15%;}

---

关于我可以我可以做的过渡和更多。。。好吧，听起来不是屁话什么的，但是。。继续学习。你在一个问题上问得太多了。

你的图像越来越大，因为你删除了show类，show类有了边距

移动：

不在图中。显示并进入图中

--更新-- 这是：

--更新-- 这适用于大多数图像，但其中一些图像比其他图像小，因此在更改幻灯片时，这些图像看起来会变小。理想的解决方案是确保它们的大小相同。此外，这将使他们看起来清晰，因为他们不必拉伸

margin-right:15%;
margin-left:15%;