3 
#img {
    width:300px;
    height:300px;
    overflow:hidden;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    color:#fff;
}
    $('#get').click(function () {
        var width = $('#img').css('background-size').width();
        var height = $('#img').css('background-size').height();

        alert('Width: ' + width + ' Height: ' + height);
    });

    //I DON'T want the size of the orginal image. I want the size after the background size has been contained. 

<div id="img" style="background:url(http://img.phombo.com/img1/photocombo/987/cache/wide-wallpaper-1440x900-013_display.jpg) #1BA5E0;">
</div>
    <p>
        <button id="get">Get Contained Size</button>

元の背景画像のサイズを取得したいのですが、背景が含まれた後 (このアクションが実行された後: background-size:contain;) jQuery を使用します。それは可能ですか？

http://jsfiddle.net/QyfG2/

4

6 に答える 6

2

この計画の欠点は、ページが読み込まれたときに background-image が実際には DOM の一部ではないことだと思います。クエリ.css('background-size')を実行すると、そのルールのキーに割り当てられた CSS ルールの値(key:value) が返されます。

したがってdiv、 の背景を持つ が#000あり、jQuery に返すように要求すると$('div').css('background')、 の値が返されます#000。

コンテナを使用して背景画像をスケーリングし、新しいサイズに.css('background-size')絞り込むため、値は「100px 500px」のような計算値にはなりません。おそらく「自動」でしょう。また、のプロパティにbackground-sizeは属性がないwidthため.css('background-size').width()、上記のjQueryで値を返しません。

私が考えることができる唯一の解決策は、JSを使用して画像の初期寸法を見つけ、次にページがレンダリングされた後のコンテナの最終寸法を見つけ、数学とif-elseステートメントを使用して2つの比率を計算することです.

例：

IMG original dimensions: 1000px x 400px
container's dimensions after page renders: 600px x 200px

// Compare the ratio of height / height and width / width
widthRatio = .6
heightRatio = .5

// image should scale proportionally, so it must scale to the smallest ratio
// e.g. if it needs to be 50% as tall, it has to be 50% as wide, even though
// it could fit set at 60% its original width

// so multiply ratio (.5) by original dimensions of image (1000px x 400px)
newImgBgDimensions = 500px x 200px
于 2013-12-24T05:58:01.147 に答える
1

以下のコードを使用すると、含まれた後に背景サイズを取得するのに役立つ場合があります

function get(img){

    var imageSrc = $(img).css('backgroundImage')
                   .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
                    .split(',')[0];    
    var image = new Image();
    image.src = imageSrc;
    var bgwidth = image.width,
    bgheight = image.height,    
    bgContainWidth = $(img).width();

    var bgContainHeight = (bgheight*bgContainWidth)/bgwidth;

    var decimal = bgContainHeight.toString().split('.');

    if(decimal[0]>=5)
    {
       bgContainHeight = Math.ceil(bgContainHeight);
    }
    else
    {
       bgContainHeight = Math.floor(bgContainHeight);
    }

    alert('bg Contain width = ' + bgContainWidth
           + ',bg Contain Height = ' + bgContainHeight);

}

$('#get').click(function () {
   get('#img');
});

デモ フィドルを参照してください: http://jsfiddle.net/c4yHf/1/

于 2013-12-24T06:59:21.160 に答える
0

高さ幅の背景画像が見つかりません。cssが背景画像の高さ幅などのプロパティを見つける方法はありません。javascriptまたはjqueryを使用して画像を読み込み、それらの画像の高さ/幅を取得することができます。

于 2013-02-22T06:59:19.450 に答える
0 
window.onload = function() {

    var imageSrc = document
                    .getElementById('hello')
                     .style
                      .backgroundImage
                       .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
                        .split(',')[0];

    // I just broke it up on newlines for readability        

    var image = new Image();
    image.src = imageSrc;

    var width = image.width,
        height = image.height;

    alert('width =' + width + ', height = ' + height)  

}
于 2013-02-22T06:21:07.013 に答える
0 
  function getheightwidth(id) {
        var element = document.getElementById(id);
        if (element && element.tagName.toLowerCase() == 'img') {
            return {
                width: element.width,
                height: element.height
            };
        }

    }

    <img id="imageid" src="......jpg" alt="" onclick="getheightwidth(this.id)"/>

     var dimensions= getheightwidth();
    alert("Width is " + dimensions.width +"Height is "+ dimensions.height);

これで問題が解決するはずです:)

于 2013-02-22T06:25:21.247 に答える
-1

実際、画像ではなくコンテナ ( ) のサイズを探してい<div id="img">ます。コンテナの寸法を取得すると、その中の画像のサイズが取得されます（背景です）。jQueryソリューションを提供します：

$(document).ready(function(){
    alert('width: ' + $('#img').width() +'; height: ' +  $('#img').height() );
})

コンテナのサイズが元の画像サイズよりも大きいかどうかも確認できます。

于 2013-02-22T07:57:54.907 に答える