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

HTML Web Development Front End Technology

Images make content more interesting by helping readers to understand the content better on the web page.

We can insert images into the HTML page. To insert image in an HTML page, use the <img> tags. It is an empty tag, containing only attributes since the closing tag is not required.

The src attribute is used to add the image source which is the URL of the image(location of the file). The alt attribute is for adding alternate text, width is for adding width, and height is for adding the height of the image.

We use style attribute to make changes in the size of the image that is height and width of the image.

Syntax

Following is the syntax to change the height and width of the image on an HTML page.

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

Example

In the following example program, we used style attribute to make a change in the height of the image.


<!DOCTYPE html>
<html>
<body>
   <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" height="300px">
</body>
</html>

Example

In the following example program, we used style attribute to make change in the width of the image.


<!DOCTYPE html>
<html>
<body>
   <img src=" https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" width="500px">
</body>
</html>

Example

In the following example program, we used style attribute to make change in both width and height of the image.


<!DOCTYPE html>
<html>
<body>
   <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" height="200"width="400px">
</body>
</html>