HTML Image size

In this tutorial, we'll learn how to specify the size of an HTML image. You are searching for the size of the image means that you have learned how to add an image. Good. Because beginners often face path problems while adding an image in the page.

Now, You'll confuse about the size, responsiveness, and fitting of the image inside the container until you read this tutorial. We'll see how to specify the size of an image without losing quality and how to make it responsive so that it fits the device content completely.

HTML <img> tag adds an image in a web page. img tag accepts width and height attributes to specify the size of images. We can also apply CSS width and height properties to resize the image within some element or page.

<img src="tree.jpg" width="100px" height="100px" />

img tag is a self closing tag i.e there is no end tag. It is also an inline-level element i.e. the content may float on the same line as the image.

width: This attribute specifies the width of the image and changes the size horizontally.
height: This attribute specifies the width of the image and changes the size vertically.

width and height dimensions specify the size of the image. You may use other units such as px, pt, in, mm, cm, or % units for the width and height attributes. Now, we'll see the different scenarios where we'll use different units.

Example 1:

If you want to get a fixed size of the image, you may use the units in px, in, cm, or pt. We have set 100px height and width for the image.

<img src="tree.jpg" width="100px" height="100px" />

But there is a drawback of using the fixed width. It may disturb the layout where the image size is greater than the screen size and thus a horizontal scrollbar is automatically added.

Example 2:

And if we want to allow the image to fill the container completely, we must set the width and height to 100%.

<div style="width:100%; height:200px;">
 <img src="tree.jpg" width="100%" height="100%" />
</div>

In this case, the image fills the area of the container. The height and width of the container is 200px and 100%, respectively. And we have set the height of image as 100% and so it covers up the complete height and width of the container.

This image will resize automatically with the device size and will not add any scrollbar. But we have to fix the height of the container. If your image is of high quality, it will not be blurred.

But here we recommend we to resize the images with the width and height. See the following examples that are the same as above but with CSS.

Example 3:

img{
width:100px; 
height:100px;	
}


<img src="tree.jpg" />

Example 4:

div{
width:100%; 
height:200px;	
}

img{
width:100%; 
height:100%;	
}


<div>
 <img src="tree.png" />
</div>