NIVO滑塊jQuery插件 - 圖像自動調整大小

Question

問題：

我怎樣才能讓我的照片，不要讓他吹了？爲什麼我不能看到整個圖像？

說明：

我把NIVO滑塊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滑塊主題）。

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, #565656 0%,#333333 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #565656 0%,#333333 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #565656 0%,#333333 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #565656 0%,#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, #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, #565656 0%,#333333 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #565656 0%,#333333 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #565656 0%,#333333 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #565656 0%,#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: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, Arial, 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 Plugin的默認腳本，除了我搞砸了一些設置。我只是要告訴你，我編輯，因爲我限於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類的寬度設置爲圖像的確切寬度，但仍不起作用。我在這裏先向您的幫助表示感謝！ 是的，我沒有這個代碼激活Jquery的：

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

評論： 的圖像大小我想他們是的方式。我認爲它的包裝滑塊的div，有問題。我只是不明白爲什麼圖像是這樣的。通常情況下，Nivo Slider將自行調整大小以適應圖像，但其調整大小以適應圖像。

Answer 1

您應該在圖像投影到用戶之前調整圖像大小。如果圖像已經在服務器上，那麼如果它是Linux服務器，則可以使用mogrify cammond from ImageMagik。