Nivo Slider Jquery插件 – 图像自动调整大小

我怎样才能让我的照片不被炸毁？为什么我看不到整个图像？

说明：

我把Nivo Slider Jquery插件放在我的网页上,效果很好！问题是当我放入图像时,图像尺寸不正确.图像模糊,滑块未显示整个图像.我看了看CSS,看起来很好.这是我的HTML代码：

<div class="theme-bar slider-wrapper">
            <div id="slider" class="nivoSlider theme-bar">
                <a href="#"><img src="images/slide1.jpg" alt="" /></a>
                <img src="images/slide2.jpg" alt="" />
                <img src="images/slide3.jpg" alt="" />
                <img src="images/slide4.jpg" alt="" />
            </div>
       </div>

这是我的CSS(我有两个链接到这个页面的CSS文件nivo-slider.css和bar.css用于Nivo Slider主题).

NIVO-slider.css：

.nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;
}
.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and Boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-Box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-Box img { display:block; }

/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    BACkground:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-Box-sizing: border-Box; /* Safari/Chrome,other WebKit */
    -moz-Box-sizing: border-Box;    /* Firefox,other Gecko */
    Box-sizing: border-Box;         /* Opera/IE 8+ */
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
     position: absolute;
    left: 0;
    bottom: -41px;
    z-index: 10;
    width: 100%;
    height: 30px;
    text-align: center;
    padding: 5px 0;
    border-top: 1px solid #333;
    BACkground: #333;
    BACkground: -moz-linear-gradient(top,#565656 0%,#333333 100%); /* FF3.6+ */
    BACkground: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#565656),color-stop(100%,#333333)); /* Chrome,Safari4+ */
    BACkground: -webkit-linear-gradient(top,#333333 100%); /* Chrome10+,Safari5.1+ */
    BACkground: -o-linear-gradient(top,#333333 100%); /* Opera 11.10+ */
    BACkground: -ms-linear-gradient(top,#333333 100%); /* IE10+ */
    BACkground: linear-gradient(to bottom,#333333 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656',endColorstr='#333333',GradientType=0 ); /* IE6-9 */
    opacity: 0.5;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.theme-bar .nivo-controlNav {
    bottom: 0;
    opacity: 1;
}
.nivo-controlNav a {
    display:inline-block;
    width:22px;
    height:22px;
    BACkground:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin: 5px 2px 0 2px;
    cursor: pointer;
}
.nivo-controlNav a.active {
    BACkground-position:0 -22px;
}

这是另一个CSS文件. bar.css：

.theme-bar.slider-wrapper {
    position: relative;
    border: 1px solid #333;
    overflow: hidden;
}
.theme-bar .nivoSlider {
    position:relative;
    BACkground:#fafafa url(loading.gif) no-repeat 50% 50%;
}
.theme-bar .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.theme-bar .nivoSlider a {
    border:0;
    display:block;
}

.theme-bar .nivo-controlNav {
    position: absolute;
    left: 0;
    bottom: -41px;
    z-index: 10;
    width: 100%;
    height: 30px;
    text-align: center;
    padding: 5px 0;
    border-top: 1px solid #333;
    BACkground: #333;
    BACkground: -moz-linear-gradient(top,GradientType=0 ); /* IE6-9 */
    opacity: 0.5;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.theme-bar:hover .nivo-controlNav {
    bottom: 0;
    opacity: 1;
}
.theme-bar .nivo-controlNav a {
    display:inline-block;
    width:22px;
    height:22px;
    BACkground:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin: 5px 2px 0 2px;
}
.theme-bar .nivo-controlNav a.active {
    BACkground-position:0 -22px;
}

.theme-bar .nivo-directionNav a {
    display:block;
    border:0;
    color: #fff;
    text-transform: uppercase;
    top: auto;
    bottom: 10px;
    z-index: 11;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 20px;
    opacity: 0.5;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.theme-bar a.nivo-nextNav { right: -50px; }
.theme-bar a.nivo-prevNav { left: -50px; }
.theme-bar:hover a.nivo-nextNav { 
    right: 15px; 
    opacity: 1;
}
.theme-bar:hover a.nivo-prevNav { 
    left: 15px; 
    opacity: 1;
}
.theme-bar .nivo-directionNav a:hover { color: #ddd; }

.theme-bar .nivo-caption {
    font-family: Helvetica,sans-serif;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.theme-bar:hover .nivo-caption {
    bottom: 41px;
}
.theme-bar .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-bar .nivo-caption a:hover {
    color:#fff;
}

.theme-bar .nivo-controlNav.nivo-thumbs-enabled {
    width: 100%;
}
.theme-bar .nivo-controlNav.nivo-thumbs-enabled a {
    width: auto;
    height: auto;
    BACkground: none;
    margin-bottom: 5px;
}
.theme-bar .nivo-controlNav.nivo-thumbs-enabled img {
    display: block;
    width: 120px;
    height: auto;
}

这是我用过的脚本.它是Nivo Slider Jquery插件的默认脚本,除了我稍微弄乱了设置.我只会向您展示我编辑的脚本,因为我限制为30000个字符：

//Default setTings
    $.fn.nivoSlider.defaults = {
        effect: 'fade',slices: 15,BoxCols: 8,BoxRows: 4,animSpeed: 550,pauseTime: 3500,startSlide: 0,directionNav: false,controlNav: true,controlNavThumbs: false,pauSEOnHover: true,manualAdvance: false,prevText: 'Prev',nextText: 'Next',randomStart: false,beforeChange: function(){},afterChange: function(){},slideshowEnd: function(){},lastSlide: function(){},afterLoad: function(){}
    };

    $.fn._reverse = [].reverse;

})(jQuery);

同样,问题只是图像看起来很破旧,你无法看到所有这些.我尝试将.nivoSlider类的宽度设置为图像的确切宽度,但它仍然不起作用.我在这里先向您的帮助表示感谢！@H_874_33@是的,我用这段代码激活了Jquery：

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

评论：@H_874_33@图像的大小与我希望的大小相同.我认为它包含滑块的div,有问题.我只是看不出为什么图像是这样的.通常,Nivo Slider会自行调整大小以适应图像,但它会调整我的图像大小以适应它.