Question

当我使用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％;在浏览器的inspect元素中以元素样式;它会奏效。所以我需要通过Jquery将background-size设置为100％。

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

更新

我用以下格式写。

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

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

Answer 1

您可以使用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%',
});

Answer 2

您可以使用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%" >

我希望它能奏效。

如何使用jquery将background-size设置为100％？

2 个答案: