スライドショーする画像をの横幅をウインドウの幅にピッタリ合わせたいです。

企業のHPのTOP画面にあるような、画像をスライドショーさせるコードを書いているのですが、画像がスライドショーするとき、各画像の横幅がウインドウの幅ピッタリに表示させたいのですが上手くいきません。
.slide-item {width: 600px;}を500pxに変更すると、モバイル500pxピッタリの画面では各画像５枚とも幅は合いますが、モバイル380pxの幅の時などの画面の場合もスライドショーする各画像の横幅をウインドウの幅に合わせたいです。

回答よろしくお願いいたします。
下のコードは画像5枚をCSSアニメーションでスライドショーするコードになります。

html

1<div id="css-slider">2 <div class="slider-wrapper">3 <div class="slide-item">4 <img src="officelyrics/office1.png" class="ex" alt="ひよこ" >5 </div>6 <div class="slide-item">7 <img src="officelyrics/hptop2.png" class="ex" alt="ひよこ" >8 </div>9 <div class="slide-item">10 <img src="officelyrics/24736572_m.png" class="ex" alt="ひよこ" >11 </div>12 <div class="slide-item">13 <img src="officelyrics/1c.png" class="ex" alt="ひよこ" >14 </div>15 <div class="slide-item">16 <img src="officelyrics/HP6b.png" class="ex" alt="ひよこ" >17 </div>18 </div>19 </div>

css

1@media screen and (max-width: 500px) {2 3 #css-slider {4 width: 100%;/* スライド自体の合計の長さ*/5 height: 200px;6 overflow: hidden;7}8 9.slide-item {10 width: 600px;11 height: 200px;12 float: left;13 position: relative;14}15 16 17.slider-wrapper {18 width: 500%;/* 画像をスライドさせる枚数500%なら5枚スライド*/19 position: relative;20 left: 0;21 will-change: transform;22 animation: slider 20s infinite;23}24 25 26 27@keyframes slider {28 0% { transform: translateX(0%); }29 7% { transform: translateX(-7%); }30 14% { transform: translateX(-14%); }31 20% { transform: translateX(-20%); }32 33 27% { transform: translateX(-27%); }34 34% { transform: translateX(-34%); }35 40% { transform: translateX(-40%); }36 37 47% { transform: translateX(-47%); }38 54% { transform: translateX(-54%); }39 60% { transform: translateX(-60%); }40 41 67% { transform: translateX(-67%); }42 74% { transform: translateX(-74%); }43 80% { transform: translateX(-80%); }44 45 87% { transform: translateX(-87%); }46 94% { transform: translateX(-94%); }47 100% { transform: translateX(0%); }48 49}50 51.ex{52 width: 100%;53}