javascript - 更改为另一张图片时如何固定图片大小？

Question

我正在学习如何使用 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 上的某些东西导致了它吗？
您可以在此处查看代码:http://codepen.io/iikinz/pen/BiLeJ

Answer 1

您的图片变大了，因为您要删除 show 类并且 show 类有边距。

移动:

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

出图.显示和入图.

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

--更新-- 这适用于您的大部分图像，但其中一些图像比其余图像小，因此在更换幻灯片时它们看起来会变小。理想的解决方案是确保它们的大小都相同。此外，由于不必拉伸(stretch)它们，它还能使它们看起来清晰。