试试这个：
CSS
.bx-viewport { min-height: 90vh !important; }
如果这不起作用或只起作用一次，请尝试：
CSS
.bx-viewport.extend { min-height: 90vh !important; }
jQuery
添加此选项：
onBeforeSlide: extendVP;
将此添加到</body>结束标记上方：
function extendVP($ele, from, to) {
var vp = $('.bx-viewport');
vp.addClass('extend');
}
更新 1
如果图像没有以适当的纵横比缩放或者甚至没有缩放，这里有 2 条建议：
CSS
简单
img { width: 100%; height: auto; }
更好
此过程涉及使用背景图像：
- 在幻灯片中放置
<div>（<li> 用于您的标记），给它一个class（如imgFrame）
- 然后在其上放置一个内联
style 属性。将图像分配给imgFrame，如下所示：
<div class="imgFrame" style="background-image: url('path/to/img.jpg')"></div>
-
接下来将其添加到您的 CSS 中：
-
.imgFrame {
width: 100%;
height: auto;
background-repeat: no-repeat;
background-size: contain;
}
更新 2
对这个 bxSlider 演示所做的修改并不是为了证明它有效，因为它首先没有高度问题。它的目的是显示来源并解释它的作用。在制作这个演示时，我创建了一个函数adaptiveWidth()，它是可选的。它的作用是在页面加载时有一个叠加层，一旦单击它，它将进入全屏模式，然后随着叠加层的消失快速退出全屏。希望这会唤醒 bxSlider 从它的昏迷中。
CodePen
CSS
<link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet"/>
/* Default Style ____________________________________________________*/
html, body { box-sizing: border-box; }
html { height: 100vh; width: 100vw; overflow-x: hidden; overflow-y: auto; }
body { height: 100%; width: 100%; position: relative; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
/* Aesthetics [Optional]_____________________________________________*/
html { font: 400 16px/1.45 'Source Code Pro'; }
body { background: #000; color: #FFF; font-variant: small-caps; }
h1 { font-size: 3rem; font-weight: 700; }
/* jquery.bxslider.css jsDelvr.com Image Override ___________________*/
.bx-wrapper .bx-loading { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/bx_loader.gif') center center no-repeat #ffffff; }
.bx-wrapper .bx-prev { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') no-repeat 0 -32px; }
.bx-wrapper .bx-next { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') no-repeat -43px -32px; }
.bx-wrapper .bx-controls-auto .bx-start { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') -86px -11px no-repeat; }
.bx-wrapper .bx-controls-auto .bx-stop { background: url('https://cdn.jsdelivr.net/bxslider/4.2.5/images/controls.png') -86px -44px no-repeat; }
/* bxSlider init Style ___________________________________________*/
#overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999999999; height: 101%; width: 101%; overflow: hidden; cursor: pointer; pointer-events: auto; background-color: black; opacity: .5; }
.ext { max-width: -moz-fit-content; max-width: -webkit-fit-content; max-width: fit-content; width: auto; height: auto; padding: 25%; } /* adaptiveWidth Style [Optional] */
HTML
<body class="expand">
<div id="overlay"><h1>Click anywhere to start</h1></div>
<div class="ext"> <!-- adaptiveWidth Wrapper [Optional] -->
<ul class='bxslider'>
<li>
<img src="http://dummyimage.com/500X16:9/000/FFF.png&text=1"/>
</li>
<li>
<img src="http://dummyimage.com/500X4:3/07C/FC0.png&text=2"/>
</li>
<li>
<img src="http://dummyimage.com/4:3X400/D06/0FF.png&text=3"/>
</li>
<li>
<img src="http://dummyimage.com/640X16:9/765/cee.png&text=4"/>
</li>
<li>
<img src="http://dummyimage.com/210X16:9/B40/6F3.png&text=5"/>
</li>
<li>
<img src="http://dummyimage.com/16:9X420/E2F/FC9.png&text=6"/>
</li>
</ul>
</div>
jQ/JS
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<!-- [Suggestion] Don't use the minified version: jquery.bxslider.min.js, it's buggy -->
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script>
/* Page loads #overlay */
$(document).ready(function() { // jQ DocReady
$("#overlay").one('click', function(event) { // User clicks #overlay
event.stopImmediatePropagation(); // Isolate Event
var tgt = document.querySelector('.expand'),// Target <body>
that = this; // Establish this as that
enterFS(tgt); // Enter full screen to wakeup bxSlider!
exitFS(); // Exit full screen
$(that).fadeOut(1000, function() { // #overlay fades...
$(that).remove(); // #overlay is gone
});
});
/* Adaptive bxSlider */
var bx = $('.bxslider').bxSlider({
adaptiveHeight: true, // http://bxslider.com/options#adaptiveHeight
onSlideBefore: adaptiveWidth // Callback [optional]
});
});
/* adaptiveHeight [Optional] */
function adaptiveWidth($ele, from, to) {
var imgWidth = $ele.find('img').width();
var bxWidth = $('.bx-wrapper').width(imgWidth);
}
/* Enter Full Screen */
function enterFS(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
}
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
/* Exit Full Screen */
function exitFS() {
if(document.exitFullscreen) {
document.exitFullscreen();
}
else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}