How to use image height and width attribute in HTML Page ?
Last Updated :
24 Sep, 2021
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...