In HTML, the "width" and "height" [height] attributes specify the dimensions of an image in pixels. In version 4.01 of the language, the height can be defined in pixels or in%, while in HTML5, the value must be expressed in pixels. This article explains how to set the width and height of an image using HTML code ("HyperText Markup Language").
Steps
Step 1. Open your HTML document with a text editor
Mac or Windows computers have a built-in editor, TextEdit and Notepad respectively, with which you can edit an HTML file or create a new one. You can choose to open this file directly from within the program (by clicking on You open from "File") or by clicking on it with the right mouse button and choosing Open with… from the menu that will appear.
Step 2. Add the following line of code:
-
src
- represents the parameter in which the path in which the image to be displayed is stored must be indicated.
-
alt
- represents the tag you assigned to the image.
- Note that those numbers are expressed in pixels;
-
You could also use the tag
style
. For example, in this case, in your code you would have a line like the following:. The tag
style
- serves to ensure that the image stays within the size specified in the code and overrides any further size commands.
Step 3. Change the attribute values
height
And
width
with those related to the image you want to view.
For example, if you enter the value 21 for both attributes, the image size will be half the size of the row image from the previous example.
Step 4. Save the file and then open it using any internet browser to view the effect
If you are not satisfied with the result, keep changing the values from the previous steps. The "width" attribute is supported by all popular and used browsers, such as Google Chrome, Safari, Mozilla Firefox, Opera, Edge and Internet Explorer.
Advice
- Always remember to specify both the height and the width of the images you insert on web pages. If these two attributes are set correctly, the space required to display the image will be preconfigured when the page is loaded from the browser. If, on the other hand, these two parameters are not set, the browser will not be able to determine the size of the image and will not be able to reserve the space necessary for its display on the page. The effect you will get will be an inevitable change in the appearance of the page while the data is being loaded, that is, while the image is being downloaded to your computer.
- Resizing a large image using the "height" and "width" attributes will force users to download the complete image (even if it takes up very little space on the page). To avoid this problem, resize the image using a suitable editor before inserting it into your web page.
