Open In App

How to use image height and width attribute in HTML Page ?

Last Updated : 24 Sep, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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. The language uses tags to define what manipulation has got to be done on the text.

To add an image in an HTML page, <img> tag is used. With that, we need to use the attribute’s width and height of the image in pixels. Specify both of the attributes.

Syntax:  

<img src="url" alt="some_text">

Attribute:  

  • src: The src stands for source. Every image has an src attribute which tells the browser where to find the image you want to display. The URL of the image provided points to the location where the image is stored.
  •  alt: If the image cannot be displayed then the alt attribute acts as an alternative description for the image. The value of the alt attribute is a user-defined text.

Setting width and height of Image: The width and height attributes are used to specify the width and height of an image. The attribute values are specified in pixels by default.

Syntax:

<img src="url" alt="some_text" width=""  height="">

Note: 

  • px: pixels – pixels (1px = 1/96th of 1in) 
  • in: inches – inches (1in = 96px = 2.54cm) 
  • pt: points – points (1pt = 1/72 of 1in) 

Example 1: An image with a height of 600 pixels and a width of 500 pixels. The width attribute specifies the width of a picture, in points.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>Welcome To GFG</h2>
      
<p>Image with width and height in points</p>
  
    <img src=
        alt="Welcome To GFG"
        width="60pt" height="80pt">
</body>
  
</html>


Output:            

Example 2: Another example to show the use of width and height attributes. We have mentioned width as 450 pixels and height as 220 pixels.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>Welcome To GFG</h2>
    <h3>img tag with width and height attribute</h3>
    <img src=
        alt="Welcome To GFG"
        width="450" height="220">
</body>
  
</html>


Output:            

Example 3: Another HTML program to show the use of <img> tag with width and height attribute. In this code, we have taken the value of height and width as 250 pixels.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Setting width and height 
        attribute of image
    </title>
</head>
  
<body>
    <p
        Image is inserted using width and 
        height attribute in pixels.
    </p>
  
  
    <img src=
        alt="GeeksforGeeks logo" 
        width="250" height="250">
  
      
<p>Height of this image is 250 pixels</p>
  
      
<p>Width of this image is 250 pixels</p>
  
    <p>
        Image is inserted using width and 
        height attribute in points.
    </p>
  
    <img src=
        alt="GeeksforGeeks logo" 
        width="50pt" height="35pt">
  
    <p>Height of this image is 50 points</p>
    <p>Width of this image is 35 points</p>
</body>
  
</html>


Output:             



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 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 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 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 get the height and width of an Image using ReactJS?
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 wh
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 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 specify the width and height of the canvas using HTML ?
The &lt;canvas&gt; tag in HTML is used to draw graphics on web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text. Syntax: &lt;canvas id="canvasID"&gt; HTML Contents... &lt;canvas&gt; Attributes: The canvas tag has two attributes which are listed below. he
2 min read
How to Set Table Cell Width & Height in HTML ?
In HTML, we can control the width and height of table cells using various approaches. This article discusses different methods to set the width and height of table cells in HTML. Table of Content Using inline StyleUsing width and height attributesUsing Inline StyleIn this approach, we are using the inline style to set the width and height of table
2 min read
Which attribute is used to specify an alternate text for an image, if the image is not loaded properly in HTML ?
In this article, we will discuss the attribute that is used to specify an alternate text for an image, if an image is not loaded properly in HTML. The &lt;img&gt; alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image. Syntax: &lt;img al
1 min read