Open In App

How to get the height and width of an Image using ReactJS?

Last Updated : 30 Sep, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

In reacting whatever we write that looks like HTML is not pure HTML actually. All the HTML looking stuff are JSX, Behind the scene, they are converted to vanilla JavaScript using babel. These all work in this way to make the developers’ life easier. Since JSX are not HTML that’s why we do have any direct reference to the HTML elements and that’s why we can’t direct fetch properties of any HTML element. To fetch the elements’ property, React gives something called as ‘ref’. Using ref we can create a direct reference to any HTML elements and get controlled over HTML elements properties. Here we use the ‘ref’ system to fetch image height and width.

Example 1: This example illustrates how to fetch the current height and width of the image.

  • index.js:

    Javascript




    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    
    

  • App.js:

    Javascript




    import React, { Component } from 'react'
    class App extends Component{
      constructor(props){ 
        super(props) 
      
        // Initialize count state 
        this.state = {show : false}
        // Bind context of 'this'
        this.handleClick = this.handleClick.bind(this)
        // Create reference of DOM object
        this.imgRef = React.createRef()
      
      
      renderDetails() {
        return this.state.show ? 
          // Accessing image details using imgRef
          <div>
              
    <p><strong>Height : </strong> 
            {this.imgRef.current.clientHeight}px</p>
      
              
    <p><strong>Width : </strong> 
            {this.imgRef.current.clientWidth}px</p>
      
          </div> : null
      }
      
      handleClick(){
      
        // Update state value
        this.setState({
          show : true
        })
      }
      
      render(){
        return
          <div> 
            <h3>GeeksforGeeks</h3>
            {/* Assign reference to DOM element     */}
            <img ref={this.imgRef} src=
            <div>
              <button onClick={this.handleClick}>Get image details</button>
            </div>
            {this.renderDetails()}
          </div>    
        )  
      
    }
    export default App

    
    

Output :

Example 2: 

  • index.js:

    Javascript




    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    
    

  • App.js:

    Javascript




    import React, { Component } from 'react'
    class App extends Component{
      constructor(props){ 
        super(props) 
      
        // Initialize count state 
        this.state = {height:null, width:null, isIncrease:false}
      
        // Bind context of 'this'
        this.handleClick = this.handleClick.bind(this)
      
        // Create reference of DOM object
        this.imgRef = React.createRef()
      
      
      handleClick(){
      
        // Fetching current height and width
        const height = this.imgRef.current.clientHeight
        const width = this.imgRef.current.clientWidth
        alert(`
          Height : ${height}
          Width : ${width}
        `)
      }
      
      render(){
        return
          <div> 
            <h3>GeeksforGeeks</h3>
            {/* Assign reference to DOM element     */}
            <img ref={this.imgRef} src=
            <div>
              <button onClick={this.handleClick}>
                Fetch dimension
              </button>
            </div>
          </div>    
        )  
      
    }
    export default App

    
    

Output :



Previous Article
Next Article

Similar Reads

HTML width/height Attribute vs CSS width/height Property
In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don't follow them.The width and height attributes are affected in img, svg tags, those are wea
3 min read
How to get the image size (height &amp; width) using JavaScript ?
For getting size of an image (height and width), Element.clientHeight and Element.clientWidth properties is used. Element.clientHeight: We can access the inner height of an element with this property. This height include the padding but not the margin and border. Element.clientWidth: We can access the inner width of an element with this property. T
2 min read
How to get the width and height of an image ?
Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width: var width = this.width; Syntax for height: var height = this.height; Example 1: This example selects the image and then use this.width and this.height method to get
2 min read
How to set the width and height of an image using HTML ?
The height and width of an image can be set using the height and width attribute. The height and width can be set in terms of pixels. The &lt;img&gt; height attribute is used to set the height of the image in pixels. The &lt;img&gt; width attribute is used to set the width of the image in pixels. Note: Always mention the height and width of images
2 min read
How to set width and height of background image in percent with respect to parent element in CSS ?
If we are using an image as a child and want to set the height and width in percentage then we need to set the parent element with some fixed size. Approach 1: Here we will use CSS inside the tags which are also known as inline CSS.For the parent div we will give a fixed size by giving height: 500px and width: 40% according to screen size, and we w
2 min read
How to set the height and width of background image inline style in react?
In React, one can create an object with styling information like background image, height, width, etc and refer to the object in the style attribute in the HTML element. Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax. Syntax : class MyHeader extends Re
2 min read
How to use image height and width attribute in HTML Page ?
HTML stands for HyperText Markup Language. Hypertext defines the link between the online pages. It is used to define the text document within tag which defines the structure of websites. This language is used to annotate text in order that a machine can know it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. T
3 min read
How to Get Window Width and Height In React Native ?
In this article, we'll explore two different approaches to obtaining the screen width and height in a React Native application. Scree­n dimensions, including width and height, play a vital role in de­signing user interfaces that adapt se­amlessly to different de­vices and orientations. By understanding these dimensions, deve­lopers empower themselv
3 min read
How to get the element's actual width and height in JavaScript ?
In JavaScript, it is often necessary to retrieve the actual width and height of an HTML element. This information can be useful in a variety of scenarios, such as setting the size of an element dynamically, centering an element on the page, or determining the size of an element for animation purposes. Below are the approaches to get the element's a
6 min read
How to get the width and height of an element in jQuery ?
In this article, we will find the width and height of an element in jQuery. There are three ways available in jQuery that we can use to find the height and width of an element. Table of Content Using the width() and height() methodsUsing the innerWidth() and innerHeight() methodsUsing the outerWidth() and outerHeight() methodsUsing the width() and
3 min read
Article Tags :