2

親コンテナに合わせて画像をスケーリングしようとしています。これが私のコードです：

マークアップ

<ul class="slides">
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li>
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li>
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li>
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li>
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li>
</ul>

CSS

.fullWidth {
    width:100%;
    height:auto;
}
.fullHeight {
    width:auto;
    height:100%;
}

JS

$('.scale img').each(function(){
    var img = $(this);

    if (img.height() < img.width()){
        img.addClass('fullWidth');
    } else {
        img.addClass('fullHeight');
    }
});

奇妙なことに、一部の画像は縦向きで、一部は横向きですが、JS はすべての画像にfullHeightクラスを与えます。親はパーセンテージディメンションを使用するため、親と同じように画像を拡大縮小およびサイズ変更します。多くのプラグインを試しましたが、どれもうまくいかないようです。誰でもアイデアを得ましたか？

4

2 に答える 2

1

すべての画像の読み込みが完了するのを待っている場合を除き、これらの値は画像が読み込まれたときにのみ有効であるため、.height()と.width()は適切な値を返しません。両方がゼロまたは未定義を返す場合、それらすべてで fullHeight クラスを取得します。

ここでの解決策は、onload ハンドラーを使用し、画像が読み込まれるときにクラスを設定することです。JS が実行される前にマークアップ内の画像が読み込まれる可能性があるため (特に、それらがブラウザーのキャッシュにある場合)、画像が読み込まれているかどうかを確認し、読み込まれている場合はその高さと幅を使用するか、まだ読み込まれていない場合は、 onload ハンドラを設定する必要があります。または、onload を使用してマークアップに onload ハンドラーを割り当てて、ロード ハンドラーがロードされる前に確実にインストールされるようにすることもできます。

画像が読み込まれているかどうかを確認し、それに基づいて適応する方法の 1 つを次に示します。

$('.scale img').each(function(){

    function setClass() {
        var img = $(this);
        if (img.height() < img.width()){
            img.addClass('fullWidth');
        } else {
            img.addClass('fullHeight');
        }
    }

    // if the image is loaded, then we can set the class now
    if (this.complete) {
        setClass.call(this);
    } else {
        // otherwise, must set class in load handler when it is loaded
        this.onload = setClass;
    }

});

マークアップを変更できる場合は、これを行うことができます。これには、画像が読み込まれるとすぐに常に設定されるという利点があります。

マークアップ:

<ul class="slides">
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li>
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li>
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li>
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li>
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li>
</ul>

コード：

// this must be a global function
function scaleDynamic() {
    var img = $(this);
    if (img.height() < img.width()){
        img.addClass('fullWidth');
    } else {
        img.addClass('fullHeight');
    }
}

参考までに、これらの画像のいずれかがロード時に表示される可能性がある場合は、デフォルトvisibility: hiddenのスタイルを に設定し、ロードが終了visibility: visibleしたら、スケーリング クラスを設定して画像がロードされたときにスタイルを に設定することをお勧めします。

于 2013-05-14T02:11:02.903 に答える
0

純粋な JQuery ソリューションの場合 - 画像の幅と高さを 100% に設定し、JQuery を介してそのラッパーをスケーリングします。

HTML

<img class="fullSize" src="">

CSS

.fullSize{
   width:100%;
   height:100%;
}

JQuery

$(document).ready(function(){
function scaleContainer(){
    //check height based on 100% window width
    var expectedHeight =  ($(window).width() * flashHeight) / divWidth;
    if(expectedHeight <= $(window).height()){

        //height is within the window - we can set width to 100%


        $('.divWrapper').css('width', $(window).width()+'px');
        $('.divWrapper').css('height', expectedHeight+'px');



    }else{
        //height doesn't fit - set Height to 100% and scale width
        var scaledWidth = (divWidth*$(window).height())/flashHeight;



        $('.divWrapper').css('width', scaledWidth+'px');
        $('.divWrapper').css('height', $(window).height()+'px');    


    }


}
scaleContainer();


$(window).resize(function() {
    scaleContainer();           
});//window resize



});
于 2013-08-23T17:42:50.693 に答える