How to Change Image Size in Html

In HTML, we can change the size of any image using the following different ways:

Using HTML tag
Using an Inline style attribute
Using internal CSS

Using HTML tag

Note: HTML 5 does not support the height and width attribute of <img>, so we have to use the inline style attribute and internal CSS options for changing the image or picture size.

If we want to change the size of an image in the document using Html tag which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the image size:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to change the size of an image.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Chnage the Size of an image
</Title>
</Head>
<Body> 
Hello User! <br>
You are at <br>
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062"> <br> 
</Body>
</Html>

Step 2: Now, place the cursor inside the img tag. And then, we have to use the height and width attribute of the img tag for changing the size of an image. So, we have to type these attributes:

<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="400" height="200">

Step 3: And, at last we have to save the Html file and then run it.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Chnage the Size of an image
</Title>
</Head>
<Body> 
Hello User! <br>
You are at <br>
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="400" height="200"> <br> 
</Body>
</Html>

Test it Now

The output of the above Html code is shown in the following screenshot:

Using an Inline Style attribute

If we want to change the size of an image using an inline style attribute which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the picture size.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the style attribute for changing the size of an image.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the Size of an image using inline style attribute
</Title>
</Head>
<Body> 
Hello User! <br>
You are at <br>
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062"> <br> 
</Body>
</Html>

Step 2: Now, place the cursor inside the img tag of that image whose size we want to change. And then, we have to type the style attribute just after the src attribute. And then, we have to type the width and height property in the style attribute same as shown in the following block:

<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" style="width:500px;height:600px;"> <br> 

Step 3: And at last we have to save the Html file and then run it.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the Size of an image using inline style attribute
</Title>
</Head>
<Body> 
Hello User! <br>
You are at <br>
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" style="width:100px;height:100px;"> <br> 
</Body>
</Html>

Test it Now

The output of above Html code is shown in the following screenshot:

Using Internal CSS

If we want to change the size of an image or picture using an internal cascading stylesheet which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the size of any image.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the internal CSS for changing the size of an image.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the Size of an image using internal CSS
</Title>
</Head>
<Body> 
Hello User! <br>
This is 
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062"> <br> 
</Body>
</Html>

Step 2: Now, we have to place the cursor in the head tag of the Html document and then define the styles inside the <style> tag as shown in the following block. And, then type the width and height attribute into the id selector.

<Head>
<style>
#imagesize
{
width:100px;
height:100px;
}
</style>
</Head>

Step 3: Now, we have to type the id in the img tag of that image whose size we want to change:

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the Size of an image using internal CSS
</Title>
<style>
#imagesize
{
width:200px;
height:200px;
}
</style>
</Head>
<Body> 
Hello User! <br>
This is <br>
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" id="imagesize"> <br> 
</Body>
</Html>

Test it Now

Step 5: Now, we have to save the Html file and then run the file. The following screenshot shows the output of the above Html code: