画像要素のimgのnaturalWidthを取得できますか？

Question

el.naturalWidthは、画像の幅を返す必要があります。私はこのような絵素作るとき：

console.log(document.getElementById('original')) 
 
console.log(document.getElementById('original').naturalWidth)

<picture> 
 
    <source srcSet='http://placehold.it/350x350' id='alt' media='(max-width: 50000px)' /> 
 
    <img src='http://placehold.it/500x500' id="original" /> 
 
</picture> 
 

 

と小さな画面上でそれを実行し、それが右の要素を出力しますが、ソース画像の幅は、なぜですか？それについて私は何ができますか？

Answer 1

提供されているコードのみに基づいてはっきりしていませんが、画像が読み込まれていることを確認してください。以下のような例：

HTML

<picture> 
    <source srcSet='http://placehold.it/350x350' id='alt' media='(max-width: 50000px)' /> 
    <img id="original" /> 
</picture> 

JSは

var img_obj = new Image(); 
img_obj.src = 'http://placehold.it/500x500'; 
img_obj.onload = function(){ 
    document.getElementById('original').src = img_obj.src; 
    console.log(img_obj.naturalWidth); 
    console.log(document.getElementById('original').getBoundingClientRect().width) 
}; 

また<img>要素の幅のためdocument.getElementById('original').getBoundingClientRect().widthを試してみてください。