0

jQueryの使用に問題があります.css('background-size','contain');

Google Chromeでは、機能する場合と機能しない場合があります。（90％の場合は機能しません）

これが私が使用しているコードです：

function scaleImg(){    

    var img = $('#img_src_div img');
    if(img.height() >= 600 || img.width() >= 570){
        $('#img_src_div').css('background-size','contain');
    }

}

これがJSFiddleの例で、動作しています。しかし、私のページの中ではそうではありません。そしてそれはほとんど同じです、URLやいくつかのテキストのようないくつかのphp生成コンテンツがあります。そしてそれが親div内にあるコード。

干渉する可能性のあるすべてのJavaScriptを削除しようとしましたが、同じです。Firefoxではそれはすべて大丈夫です。

編集：

images.php-これは別のphpページに含まれています。

//Removed - Was not usefull.

2番目の編集scaleImg();：ページが読み込まれた後に手動で呼び出すことにより、背景が拡大縮小されます。したがって、ページの読み込みに問題があります。

これは私が今使っている正確なコードです。

    <script type="text/javascript">
    function scaleImg() {
    var container = document.getElementById(\'img_src_div\');
    var img = container.children[0]; // assuming image is first child
    // var img = container.getElementsByTagName(\'img\')[0]; // use this one if not
    if( img.width >= 570 || img.height >= 600) container.style.backgroundSize = "contain";
}
    $(document).ready(function(){
    scaleImg();
    });
    </script>

3番目で最後の（うまくいけば）編集：

私は解決しました、問題は$(document).ready(...);画像が完全にダウンロードされる前に実行されることでした。したがってscaleImg();、ドキュメントレディ関数を呼び出す代わりにonload=""、画像タグ内で呼び出します。

<img alt="" onload="scaleImg(this.width,this.height);" id="img_src" src="image_url" />
4

2 に答える 2

0

プレーンJavaScriptを試してください：

function scaleImg() {
    var container = document.getElementById('img_src_div');
    var img = container.children[0]; // assuming image is first child
    // var img = container.getElementsByTagName('img')[0]; // use this one if not
    if( img.width >= 570 || img.height >= 600) container.style.backgroundSize = "contain";
}

jQueryがCSS呼び出しに対して何らかの検証を行っていて、何らかの理由で失敗している可能性があります。プレーンJSの方が信頼性が高いです;）

于 2013-01-21T17:50:56.037 に答える
0

これにより、画像の幅と手の高さを取得する前に、画像が実際に読み込まれていることを確認できます

function scaleImg(){

    var actualImg = $('#img_src_div img'),
        imgH=0,
        imgW=0,
        img = new Image();

    img.src = actualImg[0].src;
    img.onload = function(){
         imgW = img.width;
         imgH = img.height;
        alert(imgW+' x '+imgH);
    }
    if(imgH >= 600 || imgW >= 570){
        $('#img_src_div').css('background-size','contain');
    }
}

scaleImg();
于 2013-01-21T17:56:22.240 に答える