javascript-更改为另一张图像时如何固定图像尺寸？

我正在学习如何使用CSS,HTML和Javascript进行幻灯片显示,一切似乎都很好,但是当我单击next或prev时,当前图像变大并且在屏幕上停留了几秒钟.我使用的图像大小不同,但是在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上的某些原因导致了此问题？
您可以在此处查看代码：http://codepen.io/iikinz/pen/BiLeJ

解决方法:

您的图像越来越大,因为您要删除表演班,并且表演班有边距.

移动：

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

超出图形显示并进入图形.

-更新-
它是：http://codepen.io/anon/pen/Cuikc

-更新-
这适用于您的大多数图像,但是其中一些图像比其他图像要小,因此在更换幻灯片时它们看起来会变小.理想的解决方案是仅确保它们都具有相同的大小.另外,由于无需拉伸,因此它们将保持清晰的外观.

标签：slideshow,css,html,javascript
来源： https://codeday.me/bug/20191122/2058766.html