ズームインしながらフェードで切り替わるスライダーを実装したが画像がだんだん大きくなってしまいます。

トップの画像3枚をズームインしながら切り替わるスライダーを実装しましたが、
画像自体がだんだん大きくなってしまいます。
画像サイズそのままで、その画像の中だけでズームインするようにしたいです。

上の写真がスタート位置で、下の写真です。

HTML
1   <div class="wrap">
2     <ul id="slide_wrap">
3       <li class="slide_item">
4         <img src="../img/common/mv_top1.png" alt="img1">
5       </li>
6       <li class="slide_item">
7         <img src="../img/common/mv_top2.png" alt="img2">
8       </li>
9       <li class="slide_item">
10         <img src="../img/common/mv_top3.png" alt="img3">
11       </li>
12     </ul>
13   </div>

SCSS
1#slide_wrap {
2  position: relative;
3  overflow: hidden;
4}
5
6.slide_item{
7  opacity: 0;
8  transform: scale(1);
9  transition: opacity 2s linear, transform 7.5s linear;  //transformはFadeTime + IntarvalTime + α秒
10  position: relative;
11  width: 100%;
12  height: 100%;
13
14  &:not(:first-child){
15    position: absolute;
16    top: 0;
17    left : 0;
18  }
19
20  &.show_{
21    opacity: 1;
22  }
23  &.zoom_{
24    transform: scale(1.1);
25  }
26  img{
27    display: block; //下に余白できないように
28    width: 100%;
29    height: 688px;
30    object-fit:cover;
31    @include global.tab {
32      height: 611px;
33    }
34  
35  }
36}

JavaScript
1window.addEventListener('load', function () {
2  sliderStart();
3});
4function sliderStart() {
5
6   const slide = document.getElementById('slide_wrap');      //スライダー親
7   const slideItem = slide.querySelectorAll('.slide_item');   //スライド要素
8   const totalNum = slideItem.length - 1;                     // スライドの枚数を取得
9   const FadeTime = 2000;                                     //フェードインの時間
10   const IntarvalTime = 5000;                                 //クロスフェードさせるまでの間隔
11   let actNum = 0;                                            //現在アクティブな番号
12   let nowSlide;                                              //現在表示中のスライド
13   let NextSlide;                                             //次に表示するスライド
14
15   // DOM読み込み時にスライドの1枚目をフェードイン
16   slideItem[0].classList.add('show_', 'zoom_');
17
18   // 処理を繰り返す
19   setInterval(() => {
20       if (actNum < totalNum) {
21         
22           nowSlide = slideItem[actNum];
23           NextSlide = slideItem[++actNum];
24
25           //.show_削除でフェードアウト
26           nowSlide.classList.remove('show_');
27           // と同時に、次のスライドがズームしながらフェードインする
28           NextSlide.classList.add('show_', 'zoom_');
29           //フェードアウト完了後、.zoom_削除
30           setTimeout(() => {
31               nowSlide.classList.remove('zoom_');
32           }, FadeTime);
33
34
35       } else {
36
37           nowSlide = slideItem[actNum];
38           NextSlide = slideItem[actNum = 0];
39
40           //.show_削除でフェードアウト
41           nowSlide.classList.remove('show_');
42           // と同時に、次のスライドがズームしながらフェードインする
43           NextSlide.classList.add('show_', 'zoom_');
44           //フェードアウト完了後、.zoom_削除
45           setTimeout(() => {
46               nowSlide.classList.remove('zoom_');
47           }, FadeTime);
48
49       };
50   }, IntarvalTime);
51
52}