2013-02-16 52 views
2

当我使用nivo-lazy滑块时,会出现图像不适合滑块包装的问题。在nivo滑块上,我发现了一个解决方案:如何使用jquery将背景大小设置为100%?

.nivoSlider img { 
position:absolute; 
top:0px; 
left:0px; 
max-width: none; 

    width:100%; 
    height:100% !important; 
} 

但它无法在nivo-lazy滑块上工作。

我认为nivo-lazy滑块通过使用jquery更改背景图像工作。当我把背景大小:100%100%;在浏览器的检查元素中以元素样式;它会起作用。所以我需要通过Jquery将背景大小设置为100%。

我该怎么做?提前感谢您的帮助。

更新

我写的格式如下。

slider.css('background','url("something.jpeg") no-repeat','background-size','100% 100%'); 
在行jQuery的NIVO-slider.js

然后我会改变代码

slider.css('background','url("'+ parse_src(vars.currentImage) +'") no-repeat'); 
document.getElementById('slider').style.backgroundSize = "100% 100%"; 

但现在的问题是,我使用图像的动态大小和该滑块将根据每个图像宽度有规律地设置小的小格子和宽度。

回答

3

您可以使用jQuery更改任何CSS属性。

如果您正在使用的元素有id="nivo-lazy-div,那么这样做:

$("#nivo-lazy-div").css("background-size":"100% 100%"); 

更新

如果只是更改背景图片,那么你实际上并不需要设置每次。只需将它添加到你的CSS,任何背景图像将被重新调整大小。

#nivo-lazy-div{ 
    background-size:100% 100%; 
} 

更新

这样做:

slider.css({ 
    'background' : 'url("' + parse_src(vars.currentImage) + '") no-repeat', 
    'background-size' : '100% 100%', 
}); 
+0

感谢您的意见是正确的。但在我的情况下,它不会工作。我用以下格式编写。 slider.css('background','url(“something.jpeg”)no-repeat','background-size','100%100%');在123行的jquery-nivo-slider.js中。然后我将代码更改为slider.css('background','url(“'+ parse_src(vars.currentImage)+'”)no-repeat'); document.getElementById('slider')。style.backgroundSize =“100%100%”; 。但现在的问题是,我使用动态大小的图像和该滑块将根据每个图像宽度设置小的小divs和宽度propertionly – manuthalasseril 2013-02-17 10:16:30

+0

@ manuthalasseril好吧,复制粘贴您的问题生成的HTML代码。 – ATOzTOA 2013-02-17 10:47:18

+0

@manuthalasseril查看我的更新回答... – ATOzTOA 2013-02-17 10:50:05

1

您可以使用jQuery来设置你的背景文档加载刚过100%。 更好地使用你的img标签的id,例如。

<img id="image" src="your_image.jpg"> 

使用下面写代码..

<script>$(document).ready(function(){ $('#image').css("width":"100%","height":"100%"); }); </script>

不要忘了添加jQuery库。

,或者你可以简单的使用..

<img src="your_image.jpg" width="100%" height="100%" > 

我希望它会工作。

+0

感谢您的帮助。但在我的情况下,它不能使用。我使用nivo-lazy滑块。它将采用每个图像标签的来源并将该图像源设置为div的背景。 – manuthalasseril 2013-02-17 09:52:03