当观众较小时，我所拥有的图片库似乎会在右侧创建某种空间，然后说 350 像素，从而在我网站的整个右侧留下一个空隙。我正在尝试使这个图片库具有响应性，以便根据查看器的大小调整所有内容的大小。
代码如下:
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/