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。