All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Size An Image In HTML

Last Updated : Mar 11, 2024

How To Size An Image In HTML

In this tutorial we will show you how to size an image in HTML, with the help of Images a page looks to be more attractive it helps to improve the design of a webpage.

For inserting an image in HTML a <img> tag is used. HTML <img> tag will declare particular section to show image data, whereas <img> tag is an empty tag, it contains only attributes and not have any closing tag.

You can insert image in a webpage or in html from internet, directory of your computer, from local drives and from a folder also. Today, we understood how we are able to change size of an image in HTML.

Step By Step Guide On How To Size An Image In HTML :-

As we know, HTML <img> tag is a singular tag and have no any closing tag. Also, it can be used anywhere in HTML code but only in <body> tag. Today, we will specify the concept of give size to an image in HTML.

Here, we say about the size of images. As, we know all the images that we will use and we had used have some width and height or dimensions.

But we have to adjust them according to our webpage by giving them width and height. Here we will understand how we change size of an image with the help of codes.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
       <img src=”imagepath_is_declared_here” width=”200px” height=”150px” alt=””>
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here we use <img> tag, (which is a singular tag) with attributes type, src, height, width and alt etc.
  5. Here src specifies the source file with its .extensions. Here, we have to give the name of image file with its extension and it may be an online image or downloaded also, we have already discussed about how to add images in html from internet or from local drive, you can go through those webpages to understand how src works.
  6. Now, at last for its sizing we have to specify the width and height of the images according to our requirements. The size may be in px, percentages and in other formats also.
  7. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Attributes of embed tag are :-

  • Src - as we already know, src attribute is used to give the image file location in code with its extension like .jpeg, .jpg, .png, etc…
  • alt - here alt stands for alternative text, it means that if due to some error in any case image is not displayed on browser screen, then this alternative tag is used the text written inside in this tag is displayed when image file in not displayed. So, that the user may able to know about what the image is about.
  • Height - the height attribute is used in img tag just to give image dimensions about height and it may be in percent and pixel also, height is only used to give height to image. It helps to give height to an image in html.
  • Width - As height, width attribute is used in img tag just to give image dimensions about width and it may be in percent and pixel also as height, width is only used to give width to image. It helps us to change size the width of the image.

Conclusion :-

At last, after reading this article we are able to change size an image with the help of height and width attribute.

The source image may be from anywhere, but we are able to change size according to our choice with the help of height and width attributes.

I hope this tutorial on how to size an image in HTML helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪