When we learn to write language HTML to create our web pages we will not have much trouble creating web pages with only text and we will be willing to insert some image to give them color.
The element HTML that allows us to put images on our website is
img
. The line of code we would need would be the following:
<img src="myphoto.jpg" />
We see that the attribute
src
allows us to indicate the name of the image that we want to load. This name can be directly the name of the image or a relative or absolute path plus the name of the image.
By default, the size of the image you upload is its original size.
If we want to modify the size we must use the attributes HTML
width
and
height
, which allow us to modify the width and height of the image respectively. We will have to give these attributes numerical values that indicate the value in pixels that we want to reflect.
Thus, if we want to set the image to 100×100 pixels, the line of code would look like this:
<img src="myphoto.jpg" width="100" height="100" />
In this simple way we have been able to define the height and width of an image with HTML using the attributes of the element
img
. Now a challenge, would you know how you can achieve the same thing but using the CSS language? Are both alternatives valid when we want to manage the height and width or is only one correct? We tell you about it in the article Define the size of an image with CSS.