css - 如何使用 css 制作简单的幻灯片库？

Question

大家好。我正在制作我的第一个简单幻灯片库，我已经做了很多，但是有一个我不明白的问题。

图片是按照我声明的尺寸切割的，而不是全视图。任何建议我应该改变什么或添加什么？

  slider{
    display: block;
    width: 200px;
    height: 70px;
    background-color: #1f1f1f;
    overflow: hidden; 
    position: absolute;
    padding: 4px;
}

 slider > * {
    position: absolute;
    display: block;
    width: 200px;
    height: 70px;
    background-color: #1f1f1f;
    animation: slide 12s infinite;
    overflow: hidden;
 }

 slide:nth-child(1){
    left: 0%;
    animation-delay: -1s;
    background-image: url("wakacje1.jpg");
    background-position: center;
}

  slide:nth-child(2){
    animation-delay: 2s;
    background-image: url("wakacje2.jpg");
    background-position: center;
 }

 slide:nth-child(3){
    animation-delay: 5s;
    background-image: url("wakacje3.jpg");
    background-position: center;
 }

  slide:nth-child(4){
    animation-delay: 8s;
    background-image: url("wakacje4.jpg");
    background-position: center;
 }


 @keyframes slide{
    0% {left: 100%; width: 100%;}
    5% {left: 0%;}
    25% {left: 0%;}
    30% {left: -100%; width: 100%;}
    30.0001% { left: -100%; width: 0% }
    100% {left: 100%; width: 0%}
  }