html - 褪色图片库

当浏览器较小时，我说有问题的图像廊似乎在右边创建了某种空间，然后说350px，这在我网站的整个右侧都留有空隙。我正在尝试使此图片库具有响应性，以便根据查看器的大小调整所有内容的大小。

这是代码：

的CSS

.crossfade > figure {
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center center;
    color: transparent;
    height: 50%;
    opacity: 0;
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
    width: 100%;
    left: -1px;
    z-index: 0;
    border: thin solid black;
}

.crossfade > figure:nth-child(1) {
  background-image:url(001.jpg);
}
.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image:url(002.jpg);
}
.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image:url(003.jpg);
}
.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image:url(004.jpg);
}
.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url(005.jpg);
}

@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  8% {
    animation-timing-function: ease-out;
    opacity: 1;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

的HTML

<body>
<figure class="crossfade">
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
  </figure>
</body>

希望这能很好地说明我正在使用什么，您也许能够复制任何问题。我觉得可以使用此图片库做一些事情，使其对于响应快速的网站非常有用，但某些事情是不正确的，从而导致向右移动。

最佳答案

首先，您的<figure>标签具有边距。有必要吗？
如果没有，请将其添加到您的figure css：
margin: 0px;

第二，你是说这个差距吗？

如果是这样，您的标题到处都是。

要解决此问题，请减小您的font-size或使用javascript根据页面宽度调整字体大小。

编辑：您可能想将此添加到您的<head>标记：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

修复了移动浏览器上的缩放问题，但请确保您的字体足够大，因为它会禁用缩放。

抱歉，如果我没有话题。我只是想完善我的工作。

关于html - 褪色图片库，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38106004/