naturalWidth/Height で要素のレンダリングサイズではなく画像の実寸サイズを取得する

みるみ

HTML 上から画像を指定してサイズを取得するとき、

const imgSize = {
    width: document.getElementById("photo").width,
    height: document.getElementById("photo").height,
}

とやりがちですが、対象が画像の場合はビュー上のレンダリングサイズになってしまいます。

image-size-width-height

画像の実寸サイズを取得したい場合には naturalWidth/naturalHeight というプロパティが使える模様。
参考:MDN

const imgSize = {
    width: document.getElementById("photo").naturalWidth,
    height: document.getElementById("photo").naturalHeight,
}

image-size-naturalWidth-naturalHeight

サイトアイコンの 312px が取得できていることがわかります。

みるみ
みるみ

ブロガー、ソフトウェアエンジニア。

暗号資産業界で働いています。

この記事へのコメント
コメントはまだひとつもありません :)

新しいコメントを書く

  • 必須項目はコメント本文のみですが、お名前はぜひご記入いただけると嬉しいです。
    ※メールアドレスを書いた場合も公開されることはないのでご安心ください。
  • 特定のコメントに返信したい場合は各コメントにある「返信する」ボタンからどうぞ。
  • コメントはこちらで承認の作業を行うまでは表示されません。ご了承ください メールX からお願いします。