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.
To adjust the dimensions of an image displayed on a webpage using an HTML tag, the following steps should be adhered to in order to resize the image effectively:
To begin, the initial step involves inputting the HTML code into a text editor or accessing the current HTML file in the text editor where adjustments to the image size are desired.
<!Doctype Html>
<Html>
<Head>
<Title>
Chnage the Size of an image
</Title>
</Head>
<Body>
Hello User! <br>
You are at <br>
<img src="https://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image"> <br>
</Body>
</Html>
Step 2: Next, position the cursor within the img element. Subsequently, utilize the height and width properties of the img tag to adjust the dimensions of the image. Hence, you need to input the following attributes:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="400" height="200">
Step 3: Finally, save the HTML file and proceed to execute 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://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image" width="400" height="200"> <br>
</Body>
</Html>
The result of the HTML code provided earlier can be viewed in the screenshot displayed below:
Using an Inline Style attribute
To resize an image using an inline style attribute for display on a webpage, the following steps should be adhered to. By following these guidelines, adjusting the size of the image can be achieved effortlessly.
To begin, we need to input the HTML code into a text editor or open an already existing HTML file in the text editor where we intend to utilize the style attribute to adjust 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://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image"> <br>
</Body>
</Html>
Step 2: Next, position the cursor within the img tag corresponding to the image size we intend to adjust. Subsequently, the style attribute should be entered immediately after the src attribute. Finally, the width and height properties need to be specified within the style attribute, mirroring the example provided below:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" style="width:500px;height:600px;"> <br>
Step 3 involves saving the HTML file and subsequently executing 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://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image" style="width:100px;height:100px;"> <br>
</Body>
</Html>
The screenshot below displays the result of the HTML code provided above:
Using Internal CSS
To resize an image displayed on a webpage using an internal CSS, the following steps need to be followed. By following these steps, adjusting the size of any image can be achieved effortlessly.
In the first step, we need to input the HTML code into a text editor or access the current HTML file in the text editor of choice to implement internal CSS for adjusting the image size.
<!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://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image"> <br>
</Body>
</Html>
Step 2: Next, it is necessary to position the cursor within the head tag of the Html file and proceed to specify the styles within the <style> section as indicated in the subsequent code snippet. Subsequently, input the width and height properties within the id selector.
<Head>
<style>
#imagesize
{
width:100px;
height:100px;
}
</style>
</Head>
Step 3: Next, we need to input the identifier into the img tag of the particular image for which we intend to adjust the dimensions:
<!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://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image" id="imagesize"> <br>
</Body>
</Html>
Step 5: Next, it is necessary to save the HTML file before executing it. The provided screenshot illustrates the result generated by the HTML code mentioned earlier: