2

当我使用 nivo-lazy 滑块时，会出现一个问题，即图像不适合滑块包装器。在 nivo 滑块上，我找到了一个解决方案 

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

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

但它不适用于 nivo-lazy 滑块。

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

我怎样才能做到这一点？？提前感谢您的帮助。

更新

我用下面的格式写。

slider.css('background','url("something.jpeg") no-repeat','background-size','100% 100%');

在 jquery-nivo-slider.js 第 123 行。

然后我将代码更改为

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

但是现在的问题是我使用了动态大小的图像，并且该滑块将根据每个图像的宽度适当地设置小的小 div 及其宽度。

4

2 回答 2

3

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

如果您正在使用的元素 has 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%',
});
于 2013-02-16T14:57:47.713 回答
1

您可以在文档加载后使用 jQuery 将背景设置为 100%。例如，最好将 id 用于您的 img 标签。

<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%" >

我希望它会奏效。

于 2013-02-16T17:48:31.563 回答