调整div大小时避免晃动背景

Question

我正在尝试使用图像作为背景从中心扩展div。问题是在过渡期间背景有点摇晃。有什么办法可以避免这种情况吗？或任何其他解决方案？

点击“iniciar”查看。 https://jsbin.com/puqaran

HTML

<div id="slider">
    <div>
      <div class="slide_wrapper">  
      </div>
    </div>
</div>

JS（仅用于测试目的，div插入）

var slider = $('#slider');
var slides = [
     "https://i.imgur.com/VekWaBu.jpg",
    "https://i.imgur.com/IFeSs4m.jpg",
    "https://i.imgur.com/hhqWERQ.jpg",
    "https://i.imgur.com/7eT5TOE.jpg",
    "https://i.imgur.com/oQgYW16.jpg"
  ];


function addSlide() { 
    var rand = Math.floor(Math.random() * 5) + 0;
    slider.find('.slide_wrapper').children().remove();
    slider.find('.slide_wrapper').append('<div class="slide" style="background-image:url('+ slides[rand] +')"></div>');
    setTimeout(function() {
      slider.find('.slide_wrapper').children().last().addClass('slide-extend');
    }, 1);
} 

CSS

#slider {
  width: 100%;
  height: 300px;
  background-image: url(https://i.imgur.com/Jl24Wuy.jpg);
  background-position: center center;
  background-size: cover;
  position: relative;
}
#slider > div {
  display: table;
  width: 100%;
  height: 100%;
}
.slide_wrapper {
  display: table-cell;
  border: 1px solid #0f0;
  vertical-align: middle;
}
.slide {
  display: inline-block;
  width: 20px;
  height: 20px; 
  border: 1px solid #f00; 
  transition: width 1s linear, height 1s linear;
  background-position: center center; 
}
.slide.slide-extend {
  width: 100%;
  height: 100%;
}

我尝试了几个html标记和css组合而没有运气。

谢谢！