【javascript】画像の元の大きさやサイズを取得する方法

画像はhtmlやcssでサイズを指定することによってさまざまなサイズで表示させることが可能ですが画像の幅や高さを取得したいときがあると思います。

javascriptを使用することによって幅と高さを取得することが可能です。

今表示されている画像のサイズを取得したいときは、WidthやHeightで取得できますが画像本来のサイズを取得したいときがあると思います。

そんなときは、naturalWidthとnaturalHeightで取得することができます。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

本来の画像サイズを取得する方法

幅を取得する

document.getElementById('id名').naturalWidth;

画像本来の幅を取得する場合にはnaturalWidthを使用します。

高さを取得する

document.getElementById('id名').naturalHeight;

画像本来の幅を取得する場合にはnaturalHeightを使用します。

注意点

上記の方法で画像サイズを取得することができますがページを読み込む際に画像の読み込みが完了していないと画像のサイズを取得できないことがあります。

なので画像の読み込みが完了してからサイズを取得するようにしましょう。

コメント

タイトルとURLをコピーしました