How To Get Image Size Using JavaScript - W3docs

Trang chủ » Html Image Original Width » How To Get Image Size Using JavaScript - W3docs

Có thể bạn quan tâm

w3docs logo Books Learn HTML Learn CSS Learn Git Learn Javascript Learn PHP Learn python Learn Java Exercises HTML JavaScript Git CSS PHP Courses Quizzes Snippets Tools General Tools
  • Password Generator
  • HTML Editor
  • HTML Encoder
  • Base 64
  • Code Diff
  • JSON Beautifier
  • CSS Beautifier
  • Markdown Convertor
  • Find the Closest Tailwind CSS Color
  • Phrase encrypt / decrypt
  • Browser Feature Detection
  • Number convertor
  • JTW Decoder
CSS Maker
  • CSS Maker
  • CSS Maker text shadow
  • CSS Maker Text Rotation
  • CSS Maker Out Line
  • CSS Maker RGB Shadow
  • CSS Maker Transform
  • CSS Maker Font Face
Color Tools
  • Color Picker
  • Colors CMYK
  • Colors HWB
  • Colors HSL
  • Color Hex
  • Color mixer
  • Color Converter
  • Colors RGB
  • Color Contrast Analyzer
  • Color Gradient
String Tools
  • String Length Calculator
  • MD5 Hash Generator
  • Sha256 Hash Generator
  • String Reverse
  • URL Encoder
  • URL Decoder
  • Base 64 Encoder
  • Base 64 Decoder
  • Extra Spaces Remover
  • String to Lowercase
  • String to Uppercase
  • Word Count Calculator
  • Empty Lines Remover
  • HTML Tags Remover
  • Binary to Hex
  • Hex to Binary
  • Rot13 Transform on a String
  • String to Binary
  • Duplicate Lines Remover
Change theme
  • Dark
  • Light
  • System
  • Books
    • Learn HTML
    • Learn CSS
    • Learn Git
    • Learn Javascript
    • Learn PHP
    • Learn python
    • Learn Java
  • How To
    • How To NodeJs
    • How To Linux
    • How To AngularJs
    • How To PHP
    • How To HTML
    • How To CSS
    • How To Symfony
    • How To Git
    • How To Apache
    • How To JavaScript
    • How To Java
    • How To Vue.js
    • How To Python
  1. Snippets
  2. JavaScript
  3. How to Get Image Size Using JavaScript
How to Get Image Size Using JavaScript

You can get the original width and height of an image using the HTML5 image naturalWidth and naturalHeight properties, which are supported in almost all major browsers.

<!DOCTYPE html> <html> <head> <title>Title of the Document</title> </head> <body> <div>Click on img to see the result</div> <script> let img = document.createElement('img'); img.id = 'imgId'; img.src = '/uploads/media/default/0001/05/e9f3899d915c17845be51e839d5ba238f0404b07.png'; document.body.appendChild(img); img.addEventListener("click", imgSize); function imgSize() { let myImg = document.querySelector("#imgId"); let realWidth = myImg.naturalWidth; let realHeight = myImg.naturalHeight; alert("Original width=" + realWidth + ", " + "Original height=" + realHeight); } </script> </body> </html> Try it Yourself »

To get the current width and height, you can use the JavaScript clientWidth and clientHeight properties. These are DOM properties that show the current in-browser size of the inner dimensions of a DOM element, excluding margin and border.

<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <style> img { margin: 20px; } </style> </head> <body> <div>Click on img to see the result</div> <script> let img = document.createElement('img'); img.id = 'imgId'; img.src = 'https://pbs.twimg.com/profile_images/1144166476682813440/o23kohmr_400x400.png'; document.body.appendChild(img); img.addEventListener("click", imgSize); function imgSize() { let img = document.getElementById('imgId'); //or however you get a handle to the IMG let width = img.clientWidth; let height = img.clientHeight; alert("Original width=" + width + ", " + "Original height=" + height); } </script> </body> </html> Try it Yourself »

The naturalWidth and naturalHeight Properties

The naturalWidth and naturalHeight are read-only properties that return the original width and height of an image, respectively. As the width and height of an image displayed on the webpage can be altered using the ‘width’ and ‘height’ attributes of the <img> tag, the naturalWidth and naturalHeight properties are used in situations where original width or height of the image is required.

Tags dom image javascript border

Related Resources

  • How to Remove Style Added with the .css() function Using jQuery
  • How to Get the ID of the Element that Fired an Event in jQuery
  • How to Get the Value of Text Input Field Using JavaScript
  • How to Get the Value of Selected Option in a Select Box
  • How to Check if Element is Visible after Scrolling
  • How to Change the Image Source Using jQuery
  • Lazy load images with JavaScript
  • Javascript and the DOM
  • CSS width Property
  • CSS height Property
  • CSS Margin
  • CSS Border
Sorry about that How can we improve it? Submit Thanks for your feedback! Thanks for your feedback! Do you find this helpful? Yes No Quizzes
  • PHP basics
  • HTML Basics
  • Javascript Basics
  • CSS Basics
  • ES6 Basics
  • TypeScript Basics
  • React Basics
  • Angular Basics
  • Sass Basics
  • Git Basics
  • Vue.js Basics
  • SQL Basics
  • Python Basics
  • Java Basics
  • NodeJS Basics

Từ khóa » Html Image Original Width