Download ArticleDownload ArticleThis article was co-authored by How.com.vn staff writer, Darlene Antonelli, MA. Darlene Antonelli is a Technology Writer and Editor for How.com.vn. Darlene has experience teaching college courses, writing technology-related articles, and working hands-on in the technology field. She earned an MA in Writing from Rowan University in 2012 and wrote her thesis on online communities and the personalities curated in such communities.
This article has been viewed 191,812 times.
Learn more...
The width and height attributes in HTML specify the size of an image in pixels. In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels. This How.com.vn teaches you how to specify the size of an image in your HTML code.
Steps
Download Article
Open your HTML document a text editor. Windows and Mac computers come with default text editor programs like Notepad and Text Edit that will work to create or edit HTML. You can either open the HTML document within the program by clicking Open from the File tab, or you can right-click the file in your file browser and click Open With….
Add this line to your script:<img src="imagefile.jpg" alt="How.com.vn English: Image" height="42" width="42">srcis the file path to your image.altis the tag you give for image.- Note that those numbers are in pixels.
- You can also use the
styletag. For example, you'd have the following code in your text:<img src="imgfile.jpg" alt="How.com.vn English: Image" style="width:500px;height:600px;">. Thestyletag ensures the image stays that size and overrides any further image size commands.[1]
Advertisement
Changeheightandwidthnumbers. For example, if you enter 21 in thewidthand 21 in theheightareas, you'll get an image half the size as the original.
Save the file and open the file using any browser to see the effect. If you don't like the size of the image, you can repeat the previous steps.[2]
Community Q&A
- QuestionI tried it, and my image is the word "image". Any ideas?
Community AnswerMake sure that the image that you want to use is stored in the same folder as the HTML document. Also, make sure that you have put the right file name in the actual HTML coding.
Tips
- Always specify both the height and width attributes for images. If height and width are set, the space required for the image is preserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).Thanks
- Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.Thanks
References
About This Article
1. Open the HTML document in a text editor.
2. Add <img src="imagefile.jpg" alt="How.com.vn English: Image" height="42" width="42">.
3. Change the numbers for height and width to change the size.
4. Save the HTML file.
Is this article up to date?
⚠️ Disclaimer:
Content from Wiki How English language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
