光滑的滑块图像无法在MS Edge上正确调整大小

Question

希望你能帮忙解决这个问题......

我正在使用Slick滑块显示一些图像。滑块上的图像应根据屏幕大小改变大小，这在Chrome和Firefox上工作正常，但当我尝试在MS Edge上查看时，全尺寸布局有效，但针对平板电脑和手机优化的布局显示滑块图像位于可用空间的左上角。我无法理解为什么他们不会像在其他浏览器上那样占用100％的可用宽度。

我正在使用的代码如下：

HTML

<!--Image slider-->
        <div id="portfolio-container" class="slider">
            <div class="slide"><img src="graphics/example01.svg" alt="Example" title="Example"></div>
            <div class="slide"><img src="graphics/example02.svg" alt="Example" title="Example"></div>
            <div class="slide"><img src="graphics/example03.svg" alt="Example" title="Example"></div>
        </div>

CSS

#portfolio-container {
    width: 80%;
    margin: 0 auto;
}
#portfolio-container img{
    max-width: 100%;
    padding: 5px;
    margin: 0 auto;
    text-align: center;
}

的Javascript

$(document).ready(function(){
    $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 3500,
        infinity: true,
        slidesToShow: 2,
        slidesToScroll: 2,
        responsive: [
            {
            breakpoint: 600,
            settings: {
                autoplay: true,
                autoplaySpeed: 3500,
                infinity: true,
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
        ]
      });
});