How to set the width and height of an image using HTML ?
Last Updated :
17 Jan, 2024
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 <img> height attribute is used to set the height of the image in pixels. The <img> width attribute is used to set the width of the image in pixels.
Note: Always mention the height and width of images to keep the page layout stable while images load. If you don’t, the browser can’t reserve space, causing layout changes. To prevent users from downloading large images, resize them beforehand using external tools for better page performance.
Syntax
<img width="pixels" height="pixels">
Attributes
It has attribute value pixels, which are used when you want to set the height and width of the image.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to specify the width and
height of an image using HTML?
</title>
h1{
color:green;
}
</head>
<body>
<h1 >GeeksforGeeks</h1>
<h2>
How to specify the width and
height of an image using HTML?
</h2>
<img src=
alt="GeeksforGeeks logo" width="300" height="300">
</body>
</html>
|
Output:
Example 2: In this example, we will not assign width and height value so the image will display with its original height and width.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to specify the width and
height of an image using HTML?
</title>
h1{
color:green;
}
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
How to specify the width and
height of an image using HTML?
</h2>
<img src=
alt="GeeksforGeeks logo" width="300" height="300">
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...