Question

我拥有并遇到问题的图片库似乎在观看者较小时向右侧创建某种空间，然后说350px，在我的网站的整个右侧留下间隙。我正在努力使这个图库具有响应性，以便根据观看者的大小调整每个内容的大小。

以下是代码：

CSS

insert into ... select from ...

HTML

.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
  }
}

希望这可以很好地了解我正在使用的内容，您可以复制任何问题。我觉得这个图像库可以做一些事情，这对于一个响应式网站来说是有益的，但有些事情并不适合导致向右移动。

Answer 1

首先，您的<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">

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

很抱歉，如果我有点偏离主题。我只想完善我的工作。

褪色图片库

1 个答案: