Juicyslider 中的第一个图像不适合宽度页面

我在我的个人网站上工作，我的插件 Juicyslider 有问题。我工作了 3 天，但我找不到解决方案......我是初学者：/

因此，我将问题的图像放在下面。我使用Juicyslider制作我的作品的画廊图像。一切都很好，但除了一件事。第一个图像加载不适合页面。但是，在使用导航（之前或之后）并且当我返回第一张图像时，这张图片适合页面......首先，我认为这是position:absolute、display:none和width:100%的问题，之后我认为这是JS中函数顺序的问题。但是我尝试的一切都不起作用

.HTML

<div class="description-project">
            <div id="myslider_project" class="juicyslider">
                <ul>
                    <li><img src="img.jpg"></li>
                    <li><img src="img1.jpg"></li>
                    <li><img src="im2.jpg"></li>
                </ul>
                <div class="nav prev"></div>
                <div class="nav next"></div>
            </div>
</div>

.CSS

.juicyslider {
position: relative;
padding:0;
margin: 0;
border: 0;
}
.juicyslider ul {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
list-style: none outside none;
padding:0;
margin:0;
}
.juicyslider li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: none;       /* all hidden initially */
}
.juicyslider li:first-child {
position: absolute;
width: 100%;
height: 100%;
right: 0;
left: 0;
display: block; 
}
.juicyslider .nav {
position: absolute;
top: 45%;
padding: 20px;
cursor: pointer;
z-index: 500;
background-image: url(../img/nav-40.png);
.juicyslider img.maxw {
width: 100%;
height: auto;
position: absolute;
filter: inherit;     /* for ie8 to inherit parent opacity */
}
.juicyslider img.maxh {
width: auto;
height: 100%;
position: absolute;
filter: inherit;     /* for ie8 to inherit parent opacity */
}

和JS文件 （函数（$） {

$.fn.juicyslider = function(options) {
    var 
    settings = $.extend({
        // these are the defaults.
        mode: "cover", // "cover" or "contain"
        width: 'null', // set null to make the slider as wide/tall as the window,
        height: 'null', // otherwise set any other values in px or % unit
        mask: "none", // "raster", "square", "strip" or "none"
        bgcolor: "#000",
        autoplay: 0, // 0 for no autoplay, any other postive number for play interval in (ms)
        shuffle: false, // set true to shuffle the picture order
        show: {effect: 'fade', duration: 300}, // effect params refer to jQuery UI
        hide: {effect: 'fade', duration: 300}, // try 'puff' or 'drop' for the effect arg
    }, options),               
    slides = this.find('li'),
    amount = slides.length,
    current = 0,
    theWindow = $(window),
    viewport = this;
    turnSlide = function(event) {
        var step = 1;
        if (event) {
            event.preventDefault();
            step = event.data.step;
        }
        if (settings.shuffle) 
            step = Math.floor(Math.random()*(amount - 1) + 1);
        $(slides[current]).hide(settings.hide);
        current = (((current + step) % amount) + amount) % amount;
        // must make displayable before detecting the dimension
        $(slides[current]).css({display: 'block', overflow: 'hidden'});
        resizeImg();
        $(slides[current]).css({display: 'none'});
        $(slides[current]).show(settings.show);
    },

    // set bg color
    this.css('background-color', settings.bgcolor);
    // set the next button
    this.find('.nav.next').click({step:1}, turnSlide);
    this.find('.nav.prev').click({step:-1}, turnSlide);
    // set autoplay interval 
    if (settings.autoplay > 0)
        setInterval(turnSlide, settings.autoplay);
    /*
     * handling bg images resize
     */
    function resizeImg() {
        // set width and height of the slider
        viewport.width(settings.width == null ? theWindow.width() : settings.width);
        viewport.height(settings.height == null ? theWindow.height() : settings.height);
        vieww = viewport.width();
        viewh = viewport.height();
        viewRatio = vieww / viewh;
        bgimg = $(slides[current]).find("img");      // the current visible image
        var doResize = function() {
            imgRatio = bgimg.width() / bgimg.height();
            if ((viewRatio < imgRatio && settings.mode == 'contain') || (viewRatio >= imgRatio &&     settings.mode == 'cover')) {
                bgimg.removeClass('maxh').addClass('maxw').css({
                    /* get new height after adjust above */
                    top: (viewh - vieww / imgRatio) / 2,
                    left: 0
                });
            } else {
                bgimg.removeClass('maxw').addClass('maxh').css({
                    /* get new width after adjust above */
                    top: 0,
                    left: (vieww - imgRatio * viewh) / 2
                });
            }
        };
        bgimg.get(0).complete ? doResize() : bgimg.load(doResize);
    }
    theWindow.resize(resizeImg).trigger('resize');

最后，这里有图片：使用导航之前（滑块完全适合页面，但图像的一部分被裁剪，因为不适合滑块）https://i.stack.imgur.com/jbbpb.jpg

使用导航并返回第一张图像后（一切正常......https://i.stack.imgur.com/ScXTE.jpg

所以我认为在导航事件期间发生了一些在加载滑块期间不会发生的事情（例如调整大小功能......

谢谢！