The width="" and height="" Attributes
 Stop and Think
Have you ever been on a web site where a photo looks out of proportion? Often you will see this in instances of personal photos where an image has been modified using the width="" and height="" attributes. If the width to height ratio is out of proportion, images often look either abnormally long or abnormally wide.
Your best bet in regard to resizing images and displaying them on a web page is to use a combination of the methods listed previously, wherein you:
- Modify the image size in an image-editing software application – noting the new width and height pixel dimensions for your image and saving the image in the same format and location as before.
- Add the width="" and height="" attributes to the <img> tag in your HTML document using the new pixel dimensions noted.
 Extend Your Understanding
Consider the following scenario...
Upon review of the My Favorite Vacation web page, DreamVacation.html, you realize that the photo of the Amazon River is too big. So you decide to use an image-editing software application to adjust the image size and add the new size pixel dimensions to the width="" and height="" attributes of my <img> tag.
In an image-editing software application, you learn that the current size of the Amazon image, amazon.jpg, is 1200 x 900 – or 1200 pixels in width by 900 pixels in height. This is far too big for display within a web page. The image should be resized to something much smaller. In fact, it should be resized to about 1/3 its current size. You then use image-editing software to modify the canvas size to 400 pixels in width – ensuring that the height remains in proportion with the original dimensions.
After making the adjustments, the new pixel dimensions are 400 x 300 – 400 pixels in width by 300 pixels in height. This is a much more manageable size for a web page. You then re-save the image as amazon.jpg and replace the original image.
 Let's See it in Action : The width="" and height="" Attributes
Now that you have used an image-editing software application to adjust the image size, you can add width="" and height="" attributes to the <img> tag and input the new dimension values. The HTML code below would be used to not only add the Amazon.jpg image to the web page, but it would also ensure the image size is correctly displayed in a web browser.
The last step in the scenario would be to review the the changes made to the My Favorite Vacation web page, in a web browser, to ensure the image modifications are appropriate. The image below demonstrates the changes made. Compare the image size displyed below to the image size displayed in previous screenshots of the My Favorite Vacation, DreamVacation.html, web page.
Next
| 
