Question

我正在学习如何使用CSS，HTML和Javascript进行幻灯片放映，一切似乎都很好但是当我点击下一个或上一个时，当前图像会变得更大并且它会在屏幕上停留几秒钟。我正在使用不同大小的图像，但我在CSS上添加了一个宽度 - ＆gt; 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

您的图片越来越大，因为您要移除节目类，而且节目类有边距。

移动：

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

out of figure.show and into figure。

- UPDATE-- 这是：http://codepen.io/anon/pen/Cuikc

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

Answer 2

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

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

关于图片尺寸：

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

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

关于我可以进行过渡以及更多......好吧，不要听起来很苛刻或什么都没有，但是......继续学习。你在一个问题上问得太多了。

更改为其他图像时如何修复图像尺寸？

2 个答案: