背景画像のサイズを取得する（設定されていない場合）

Question

背景画像の幅と高さを取得する必要がありますが、プロパティがCSSで設定されている場合にのみ簡単に取り出せる例があります。

インラインCSSファイルまたはCSSファイルでCSSに設定されていない場合、幅と高さを取得する方法はありますか？

これは私が

element.style { 
    background-image: url(generated-by-cms.jpg); 
} 

おかげで...と仕事をしなければならないすべてです！

Answer 1

プロパティを設定しなかった場合、CSS経由で取得することはできません。イメージが外部に読み込まれるので、CSSファイルにはサイズに関するヒントはありません。さらに、背景画像を使って設定しようとすると、画像は要素サイズによって制限されます。

しかし、できることはJavascript経由でイメージをロードして（既にURLがあるので）、目的のディメンションに要素を設定します。

var img = new Image(); // an empty image object 
img.src = 'someurl'; // image url 

// this is fired after 'someurl' is loaded. 
img.onload = function() { 
    document.getElementById('myimg').src = img.src; 
    document.getElementById('myimg').width = img.width; 
    document.getElementById('myimg').height = img.height; 
} 

注意あなたがする必要はありません：たとえば、のは、あなたのHTMLファイルは、あなたがこのようなあなたのJavascriptを設定することができ

<img id="myimg"></img> <!-- an empty image --> 

ID「myimg」とimgタグが含まれているとしましょう空のイメージを設定するか、そうしたくない場合はプロパティを設定します。 img.widthプロパティとimg.heightプロパティを操作し、必要に応じて他の場所で使用できます。