In this tutorial we will show you the solution of how to resize an image HTML, for resize an image in css we had many options of properties here we used some css property with example each one will shows different size of image.
The main property is ‘object-fit’ it had many values we used four of them in out html webpage but we can also resize image by using background size, background position or simply with height and width property.
Step By Step Guide On How To Resize An Image HTML :-
Here we defined four images using img tag with src, class attributes. Using src attribute we inserted images on webpage and class attribute values of ‘im1,im2,im3,im4’ defined in each image used to apply different style of property ‘object-fit’ so each image will displayed different aspect.
In style we used img tag name for set width, height, border of image.
We used same image of ‘background.jpg’ as four times but we can also use different images.
<!DOCTYPE html>
<html>
<head>
<title>HTML IMAGE RESIZE</title>
<style>
img{
width:200px;
height:300px;
border:solid 1px #ccc;
}
.im1{object-fit: contain;}
.im2{object-fit: cover;}
.im3{object-fit: fill;}
.im4{object-fit: none;}
</style>
</head>
<body>
<img src="background.jpg" class="im1"></img>
<img src="background.jpg" class="im2"></img>
<img src="background.jpg" class="im3"></img>
<img src="background.jpg" class="im4"></img>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We defined img tag four times with same image with attributes src and class. Src attribute we know used to collect image path and class attributes used for defined different value of property ‘object-fit’.
- Within style tag we defined styles for html webpage. Using img tag we sets all image width to ‘200px’, height to ‘300px’, border style ‘solid’, border width ‘1px’ and border color ‘#ccc-it’s a grey shade color’.
- Using class values ‘im1,im2,im3,im4’ we applied ‘object-fit’ style property with different style. In first image we applied ‘object-fit: contain;’ property, then on second image we applied ‘object-fit: cover;’ and on third image ‘object-fit: fill;’.
- On last image we applied ‘object-fit: none;’ style properties. We can see each style property result on webpage.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to resize image in html.
When we executes our program on browser we can see four images with different look.
When use ‘object-fit: contain;’ property that image will displayed with full size at center of position, ‘object-fit: cover;’ property covers whole size we defined with image but we can’t see whole image, ‘object-fit: fill;’ this property will looks like before said two properties combination and last ‘object-fit: none;’ will choose random part of image and covers whole size.
I hope this tutorial on how to resize an image HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
