Bootstrap Carousel图像调整大小失去全宽

Question

此页面上的Bootstrap Carousel中的图像填充页面首次加载时的宽度并具有正确的宽高比：http://mj-test.azurewebsites.net/

当您将浏览器的大小调整为较小并在浏览器上返回全宽时，图像会缩小，左侧和右侧会出现黑条。它需要像加载页面时一样保持图像的全宽。我查看了this solution并应用了这个CSS，但是当浏览器缩小时它会扭曲图像（拉伸宽度），然后又回到全宽：

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    display: block;
    height: auto;
    max-width: 100%;
    line-height: 1;
}

我还查看了this answer（图片上的width:100%），但它会导致图片在菜单下运行。这是简化的轮播HTML：

<div class="carousel slide carousel-fade" id="slideshow-carousel-1" data-ride="carousel" data-interval="9000">
    <div class="carousel-inner">
        <div class="item item-1 slide-image active">
            <img class="img-responsive bg-item parallax" data-width="1970" data-height="1290" src="~/images/slideshow/baby-close-fade.jpg" alt="Slide 1 Background">
           <div class="carousel-caption">
               <h1 class="title">Caption text</h1>
           </div>
        </div>
    </div>
 </div>

在窗口调整大小时调用此代码：

$(window).on('resize', imageFit);

但我不知道这是怎么造成这些问题的。感谢帮助。感谢。