Sometimes you may need to change the size of an image on your webpage so to better format it on the page. This is easily accomplished using the attributes associated with the <img src> tag. Changing the height and width of the image in the tag will not automatically resize the image proportionally. It is up to the person writing the code to determine the ratio to adjust the picture so it does not distort it. Also, this method of changing the picture size does not change the actual file size of the image.

 

We will start with our code from the last section:

<img src="/support/Images/image.jpg" align="middle">

To change the width and height of the image, you will need to use the width and height tags:

  • width="___"
  • height="___"

Now we will insert the tags into our code, putting in the width and height that we want the image to be (in pixels):

<img src="/support/Images/image.jpg" align="middle" width="250" height="320">

Remember that any time you add an attribute, make sure you use quotation marks around the value or it will not work properly. Also, the order of the attributes does not matter, you can also use:

<img src="/support/Images/image.jpg" width="250" height="320"align="middle">

Please check the next article on How to make an Image a Link. If you missed our previous article, please see the Changing the Image Alignment tutorial. For more information on this course please visit Inserting Images into a Website

Continued Education in Course 102: Inserting Images into a Website
You are viewing Section 3: Changing the Size of an Image
Changing the Image Alignment
How to make an Image a Link
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!