0

私が構築しているウェブサイトにフラックススライダーを使用したい...画像サイズを変更できないことを除いて、すべて正常に動作します...次のjqueryを試しました

$(function(){

if(!flux.browser.supportsTransitions)
 alert("Flux Slider requires a browser that supports CSS3 transitions");

window.f = new flux.slider('#slider', {
pagination: true,
width: 300,
height: 300,
transitions: ['bars3d']

});

});

しかし、これは、スケーリングの代わりに指定したサイズに画像をトリミングします。
解決策はありますか？助けてください。

4

2 に答える 2

1

高さを 0 に変更し、幅を負に設定すると、それが可能になります。

$(function(){
    if(!flux.browser.supportsTransitions)
        alert("Flux Slider requires a browser that supports CSS3 transitions");
    window.f = new flux.slider('#slider', {
        pagination: true,
        width: -300,
        height: 0,
        transitions: ['bars3d']
    });
});
于 2014-06-05T09:21:05.593 に答える
0

考えられる問題は 3 つあります (html/css r フィドルを追加していないためわかりません)。

height1）設定した画像コンテナのサイズを変更しています。widthたとえば、<img src="blahblah.jgp" height="900" width="500" />削除するheight/widthと問題が修正されます。

2）次に、jsをオーバーライドするCSSを作成していないかどうか、つまり!important、画像に適用された画像CSS（高さ/幅）を使用しているかどうかを確認します。

3) 最後になりましたが、height/width既に行っている js を使用してイメージ コンテナーを設定することに加えて、これを試してください。これにより、イメージがコンテナーに自動的に収まるようになります。

img{
    max-width: 100% !important;
    height:auto 100% !important;
    display:block 100% !important;
}

また、js にも !important を追加してみてください。うまくいけば、それらのいずれかがあなたのために働くでしょう。

幸運を

于 2014-02-15T21:00:51.950 に答える