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-imageを変更することで機能すると思います。background-size：100％100％; ブラウザのinspect要素の要素スタイル。それは動作します。したがって、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プロパティを変更できます。

使用している要素にが含まれている場合は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％設定できます。たとえば、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%" >

私はそれがうまくいくことを願っています。

于 2013-02-16T17:48:31.563 に答える