6

jqueryやcss、またはその他の方法とは異なるサイズにスライド画像のサイズを変更(スケーリング)する方法は?

メイン画像を常に全幅と高さでロードし、次の方法で制御すると機能しません。

サンプルの完全に機能するスキッター サンプルをダウンロード して、自分で簡単にテストできます。

http://www.skitter-slider.net/documentation内にヘルプはありません

サンプル コードに従ってイメージ スライダー コンテナーのサイズを変更することは可能ですが、イメージが 530 ピクセルを超える場合、その一部しか表示されません。

$(document).ready(function() {
           $('.box_skitter_large').css({width: 530, height: 110}).skitter({
                theme: 'minimalist',numbers_align: 'center'                 
            });    
        });
    </script>

また、img タグで画像の幅と高さを設定しても役に立ちません。

以下は、元の質問のより具体的なシナリオであり、役立つ場合があります。

スキッターと jquery を使用して、ウィンドウのサイズ変更時に画像のサイズを動的に調整するために、以下のコードを作成しました。しかし、それは機能していません

<script>
$('.box_skitter_normal').addClass("z1").skitter({label: false, numbers: false});
            $('.box_skitter_normal2').addClass("z2").skitter({label: false, numbers: false});

$(window).resize(function() {
   $('.box_skitter_normal').addClass("z1").skitter({label: false, numbers: false});
            $('.box_skitter_normal2').addClass("z2").skitter({label: false, numbers: false});
});
</script>
4

4 に答える 4

2

次のクラスに目的のスタイルを追加すると、問題が解決しました

.box_skitter img {      width: 530px ; }
于 2014-04-20T11:53:13.807 に答える
0

こんにちは、私は css でこのハックを行います。

.container_skitter{
    width: 100%!important;
    height: 100%!important;
}
.image_main{
    width: 100%!important;
    height: 100%!important;
}
.box_skitter_large {
    max-width: 408px !important;
    max-height: 275px !important;
}
.box_clone{    width: 100%!important;
    height: 100%!important;}
.cube{width:100% !important;}

これがうまくいくことを願っています:)

于 2015-09-02T13:51:36.710 に答える