Width and height of an image can be set using either of the following.
- HTML attributes within the <img> tag. Syntax for this is, <img src="image.jpg" width="300" height="200">
- Using CSS properties, such as inline style attributes
It has attribute value pixels, which are used when you want to set the height and width of the image.
Example 1: Using img attributes
The image will appear with a width 300 and a height 300 pixels
Example 2: Using CSS
Example 3: Without Specifying Dimensions
In this example, we will not assign width and height value so the image will display with its original height and width.
Best Practices
- It is a best practice to resize the image to its intended display dimensions using an image editing program before uploading it to your website.
- For responsive web pages, using CSS properties like max-width: 100% is recommended, allowing images to scale down on smaller screens while retaining quality.
- If you specify both width and height, the image may appear stretched or squashed. To avoid this, consider specifying only one dimension (e.g., width) and setting the other to auto (e.g., height:auto;)
