How To Increase The Size Of An Image In Html

Table of contents:

How To Increase The Size Of An Image In Html
How To Increase The Size Of An Image In Html

Video: How To Increase The Size Of An Image In Html

Video: How To Increase The Size Of An Image In Html
Video: Html tutorial 5 resizing images,and centering them 2024, December
Anonim

You can change the size of the image displayed on the page by specifying the appropriate attributes for the tag

which is responsible for showing the graphics on the HTML page. Increasing or decreasing is done through the width and height attributes.

How to increase the size of an image in html
How to increase the size of an image in html

Insert a picture

Before editing, add an image to the page by specifying tags

… To edit an HTML document, you need to open the page in any text editor. Right-click on the file and select the "Open With" attribute - "Notepad". You can also specify any other editor that is more convenient for you to use for changing the code.

Go to the document section and find the tag

… If the image has not yet been added to the page, enter the following code:

The path to the image file can be either relative or absolute. The alt="Image" attribute is responsible for the name of the image and adding a caption to it, which will be displayed when the mouse pointer is over the image.

Change of size

To enlarge the image, set the appropriate width and height parameters to it by adding attributes to the image tag:

The width parameter corresponds to the width of the image, and height contains the indicator of the image's height. In this case, when you open the page, an image with a width of 300 pixels and a height of 350 pixels will be displayed in the browser window. You can also add the hspace and vspace attributes to change the formatting settings on the page:

In this descriptor, horizontal (hspace) and vertical (vspace) margins from the image were specified. Any text added to the page will be spaced 5 pixels horizontally from the image and 10 pixels vertically. The border attribute is responsible for creating a 1 pixel border around the picture.

It should be noted that the size of the image can be set not only in pixels, but also as a percentage relative to the size of the browser window. For example:

As a result of the work of this code, the image will be stretched across the entire width of the window. It is worth noting that the picture in this case may get distorted. The magnified display of the picture depends on the quality of the picture itself.

Save the changes made using the "File" - "Save" function of the "Notepad" window. Check the display of the image in the browser window by opening the HTML file by right-clicking and choosing the "Open With" option. In the list of proposed options, select the program that you use to browse the Internet. You can edit the HTML file any number of times to adjust the image size.

Recommended: