Javascript bxSlider jQuery插件同高变宽

我正在使用这个插件创建一个图像库。然而，我正试图找出如何设置图像，使其具有相同的高度，但宽度不同。在中，它提供了一个解决方案，但它为图库中的图像设置了一个固定的宽度，因此不再具有响应性

另一部分是如何使bxSlider的背景透明，以便显示我的html的背景。下面是我的代码，谢谢你的帮助

HTML:

CSS:

---

可能是重复的，但它没有提供插件的解决方案，它只是提供了一个全新的代码。我正在试着看看是否可以用插件解决这个问题。从这一点以及bxSlider不能适应不同宽度的示例中可以明显看出这一点。如果可以进行裁剪，您可以将图像用作背景和

背景大小：封面

。@isherwood感谢您的快速回复。知道哪个jquery插件可以适应不同的宽度吗？感谢您的帮助，请注意这是Owl v2.0，它仍处于测试阶段。如果你不小心，你很容易发现自己在v1文档中。不过，我很成功地使用了它。反应灵敏的行为和鼠标滚轮/滑动支持使其非常适合移动设备。

<div class="container-fluid">

    <div id="back_to_story">
        <a href="ourstory.html">Our Story</a>
    </div> <!-- back_to_story -->

    <!-- NAVIGATION -->
    <div id="navigationmenu">
    </div>

    <p id="time">
    </p>

    <div class="main_container">

        <div class="col-lg-2 col-md-2 col-sm-2" id="before">
           <p><span id="prev"></span></p>
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8" id="content" style="background:#666">
      <!--       GALLERY -->
            <ul class="bxslider">
                <li><img src="assets/slides/image1.png"></li>
                <li><img src="assets/slides/image2.jpg"></li>
                <li><img src="assets/slides/image3.jpg"></li>
            </ul>

        </div>

        <div class="col-lg-2 col-md-2 col-sm-2" id="after">        
            <p><span id="next"></span></p>
        </div>

jQuery(document).ready(function(){
    jQuery('.bxslider').bxSlider({
        pager:false,
        nextSelector: '#next',
        prevSelector: '#prev',
        nextText: 'NEXT',
        prevText: 'PREV'
    });
});

.container-fluid{
    margin:0 auto;
    height:100%;
    padding:50px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#before, #after{
    background-color: red;
}

#prev, #next{
    text-align:center;
    vertical-align: middle;
    display: table-cell;
}

#content{
    min-height: 100%
}

.bxslider{
    top:-5px;
    left:-5px;
}
.bx-wrapper .bx-viewport 
{
    -moz-box-shadow: 0;
    -webkit-box-shadow: 0;
    box-shadow: none;
    border: 0;
    left: 0;

        -webkit-transform: translatez(0);
        -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);

    height:100%;
    background-color: none;
}