幻灯片显示全屏背景

Question

我已经设法在我的页面上获得了一个功能齐全的背景幻灯片，但当在较小的屏幕上查看页面时，幻灯片会向右移动。这是只使用HTML和CSS构建的。默认情况下，幻灯片放映是有响应的，并且确实会随着屏幕大小的缩小而调整图像的大小，但当窗口缩放到较小的大小时，会添加奇怪的边距或填充。如有任何帮助，我们将不胜感激。

HTML

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

CSS

.crossfade > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: 100%;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: -1;
}
.crossfade{padding:0px;}
/*add images to slideshow*/
.crossfade > figure:nth-child(1) { background-image: url('Images/Logo_PNG.png'); }
.crossfade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('Images/Breakfast_Icon.png');
}
.crossfade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('Images/Mountain_wolf.png');
}
.crossfade > figure:nth-child(4) {
animation-delay: 18s;
background-image: url('Images/Ice_Cream_Logo.png');
}
.crossfade > figure:nth-child(5) {
animation-delay: 24s;
background-image: url('Images/Night_Sky_Scene.png');
}
/*crossfade between imgs*/
@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

我认为这可能是由图元素上的默认CSS值引起的。如果您在这里查看，您可以看到图HTML元素具有以下默认值：

display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;

我相信左边40像素的边距&是权利造成了这个额外的间距你的视觉。尝试将margin: 0px;添加到.crossfade > figureCSS选择器中，如下所示：

.crossfade > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: 100%;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: -1;
margin: 0; /* <- SET MARGIN TO ZERO HERE */
}