How to make simple slide gallery using css?

Question

Hello everyone. I'm working on my first simple slide gallery, I've done much, but there is a problem which I do not understand.

The pictures are cut in a size I declare, not in a full view. Any suggestions what should I change or something to add?

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