2

背景画像付きのDIVがあります。しかし、私の要件は、背景画像の高さと幅に応じてDIVサイズをどのように拡張できるかです。私はこのリンクの助けを借りていくつかのコードを試しました。

var src = $('#divID').css('background-image').
                      replace('url', '')
                     .replace('(', '')
                     .replace(')', '')
                     .replace('"', '')
                     .replace('"', '');
$('body').append('<img id="appendedImg" src="' + src + '" style="height:0px;width:0px"');
var img = document.getElementById('appendedImg');       
var width = img.clientWidth;
var height = img.clientHeight; 
$('#appendedImg').detach();

可能であれば、エレガントなソリューションを探しています。

4

2 に答える 2

5

おそらく、幅/高さの負荷を探す必要があります。

var img = document.getElementById('appendedImg');
img.onload = function() {   
    var width = img.width;
    var height = img.height;
    console.log(width,height);
};

また、添付する必要はありません。新しい画像を作成するだけで十分です。これが私がそれをする方法です：

var $div = $('#divID'),
    src = $div.css('background-image').replace(/url\(\"([^\"]+).*/,'$1');

$(new Image).load(function() {
    $div.width(this.width).height(this.height);
}).attr('src', src);
于 2012-05-31T09:33:24.627 に答える
0

最初にimgをロードしてから、その高さと幅を取得します。

imgSrc = 'http://ajthomas.co.uk/wp-content/themes/ajthomascouk/library/images/logo.png'

// append the temp imag
$('body').append('<img src="'+imgSrc+'" alt="" style="display:none" id="dummyImage"/>');

// get the image width and height
imgWidth = $('#dummyImage').width()+'px';
imgHeight = $('#dummyImage').height()+'px';

// remove the image
$('#dummyImage').remove();

// set the css for the div
$('#imADiv').css({height: imgHeight, width: imgWidth, 'background-image': 'url('+imgSrc+')'});

ここにコード化してください-http://jsfiddle.net/LTdtM/

于 2012-05-31T09:44:33.640 に答える