0

重複の可能性：
画像クロスブラウザの元のサイズを決定しますか？
jqueryは画像サイズを取得します

JS / JQを使用して画像の実際のサイズを取得する方法を教えてもらえますか？THX ！このサイトから多くの解決策を試しましたが、成功しませんでした...

var selector = $(".album_pics > img[id="+img_id+"]") ;
var old_width = selector.width() ;

動作しません。

4

1 に答える 1

9

naturalWidth次のプロパティを使用できます。

var img = document.getElementById('imageToTest'), // or whatever...
    width = img.naturalWidth;

JSフィドルデモ。

もちろん、これにはJavaScriptが実行される前に画像をロードする時間が必要です（したがって、jQueryでは$(window).load()メソッドを使用します）。また、これはHTML5のみです（これは、今チェックするまで気づいていませんでした）。

ちなみに、おそらくその名前が示すように、プロパティもありnaturalHeightます（それが役立つ場合）。

もう少し機能的なアプローチを追加するために更新されました：

function showNaturalInfo(el) {
    if (!el || el.tagName.toLowerCase() !== 'img') {
        return false;
    }
    else {
        var w = el.naturalWidth,
            h = el.naturalHeight,
            D = document,
            details = D.createElement('span'),
            detailsText = D.createTextNode('Natural width: ' + w + 'px; natural height: ' + h + 'px.');
        details.appendChild(detailsText);
        el.title = 'Natural width: ' + w + 'px; natural height: ' + h + 'px.';
        el.parentNode.insertBefore(details, el.nextSibling);
    }
}

var imgs = document.getElementsByTagName('img');

for (var i = 0, len = imgs.length; i < len; i++) {
    showNaturalInfo(imgs[i]);
}​

JSフィドルデモ。

参照：

于 2012-09-23T21:23:24.560 に答える