How to set height and width of an image in an HTML page

HTML Image Height & Width Attributes

In HTML, width and height attributes of HTML image element are used to to specify the dimensions of an image in a webpage.

These attributes define the width and height of the image in pixels.

It is good to practice to set the height and width of an image. If you don't set the attributes, the browser will display the image at its actual size.

Example of Height & Width of Image

Create an HTML <image> element and add src="logoimage.jpg" attribute to the image element to specify the relative URL of the image.

Add width attribute to the image element and assign value "200" to the attribute.

Add eight attribute to the image element and assign value "90" to the attribute.

Look at the following example:

Example of HTML Image Height & Width


Output of the above example

Examples of Image Height & Width in a Webpage


xFactor School Logo

'height' and 'width' attributes are used to set image height and width.

height=90 and width=200 are set for the image.


Let us change the height & width of the image and check the effect of cfhange:


Output of the above example

Examples of Image Height & Width in a Webpage


xFactor School Logo

'height' and 'width' attributes are used to set image height and width.

height=180 and width=400 are set for the image.


Live Code Playground

In the following HTML code editor, you can practice the above code by changing the height and width value of the image element. Click on the 'Run Code' button to render the code; the rendered page will be displayed in the following HTML Code Output frame. Practice until you become comfortable and proficient with your code.

HTML logo HTML Online Editor
HTML Code Output